gpt4 book ai didi

javascript - 使用 Angular 动态更新 CSS 类

转载 作者:行者123 更新时间:2023-11-29 18:20:57 27 4
gpt4 key购买 nike

我有一个 AngularJS 应用程序。我正在尝试学习在 Angular 中做事的正确方式并更好地理解框架。考虑到这一点,我有一个如下所示的应用程序:

index.html

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="myControllers.js"></script>

<style type="text/css">
.init { border: solid 1px black; background-color: white; color: black; }

.red { background-color:red; color:white; border:none; }
.white { background-color: white; color: black; border:none; }
.blue { background-color:blue; color:white; border:none; }
</style>
</head>

<body ng-controller="StripeListCtrl">
<select ng-options="stripe.id as stripe.name for stripe in stripes" ng-model="selectedStripe">
<option value="">Select a Stripe Color</option>
</select>

<div ng-class="{{getStripeCss()}}">
You chose {{selectedStripe.name}}
</div>
</body>
</html>

我的 Controller .js

function StripeListCtrl($scope) {
$scope.selectedStripe = null;
$scope.stripes = [
{ name: "Red", id=2, css: 'red' },
{ name: "White", id: 1, css: 'white' },
{ name: "Blue", id: 5, css: 'blue' }
];

$scope.getStripeCss = function() {
if ($scope.selectedStripe == null) {
return "init";
}
return $scope.selectedStripe.css;
}
}

我正在尝试弄清楚当用户在下拉列表中选择一个选项时如何动态更改 DIV 元素样式。这时,getStripeCss 函数被触发。但是,selectedStripe 是 strip 的 id。我有 XAML 背景,习惯于拥有整个对象。虽然我知道我可以编写一个实用程序方法来循环遍历 strip 对象并找到具有相应 ID 的对象,但这对于此类任务来说似乎相当手动。

有没有比我提到的编写实用程序方法更优雅的方法?如果是,怎么办?

谢谢!

最佳答案

您根本不需要 $scope 中的函数 getStripeCss

如果您希望变量 selectedStripe 存储一个对象,您需要像这样更改 ng-options:

<select ng-options="stripe.name for stripe in stripes" ng-model="selectedStripe">
<option value="">Select a Stripe Color</option>
</select>

<div ng-class="{red:selectedStripe.id==2, white:selectedStripe.id==1,
blue:selectedStripe.id==5}">
You chose {{selectedStripe.name}}
</div>

但是,如果您希望 selectedStripe 存储一个键(就像您当前正在做的那样)并希望访问 stripes 数组/对象中的元素而不对其进行循环,你可以这样做:

<select ng-options="key as value.name for (key,value) in stripes" 
ng-model="selectedStripe">
<option value="">Select a Stripe Color</option>
</select>

<div ng-class="{red:selectedStripe==2, white:selectedStripe==1,
blue:selectedStripe==5}">
You chose {{stripes[selectedStripe].name}}
</div>

改变模型:

$scope.stripes = {
2:{ name: "Red", id:2, css: 'red' },
1:{ name: "White", id: 1, css: 'white' },
5:{ name: "Blue", id: 5, css: 'blue' }
};

关于javascript - 使用 Angular 动态更新 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18848719/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com