使用 AngularJs 中的表达式为 ng-class 动态生成变量 [英] Generating variable for ng-class dynamically using Expression in AngularJs

查看：14 发布时间：2021/11/9 22:27:46 javascript angularjs html angularjs-directive

本文介绍了使用 AngularJs 中的表达式为 ng-class 动态生成变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的 HTML 代码片段.


<div ng-class="myBoxes.{{boxName}}">{{boxName}}</div>

我想做什么:我使用上面编写的代码片段创建了 3 个 div 元素，它们将位于屏幕顶部.每个 div 元素将被赋予一个使用 css 的盒子形状.一个框(div)可以有红色作为其背景或黑色作为其背景.

这两种颜色的 CSS 是:

.redBackground{背景颜色:红色；}.blackBackground{背景颜色:黑色；}

这是我的控制器的一个片段:

$scope.boxNameList=['Box1','Box2','Box3'];$scope.myBoxes={Box1:红色背景"，Box2: "黑色背景",框 3:黑色背景"}

在这个例子中，我将 $scope.myBoxes 作为静态 Json，但在运行时我计划生成 Json 代码，以便我可以为我的盒子动态分配背景颜色.

我面临的问题:问题是我根本看不到带有颜色的框.如您所见，本例中的 ng-class 变量名称也是动态生成的.如果我不使用 ng-repeat 并且不动态生成 ng-class 变量名，那么它工作正常.例如，对于下面给出的代码片段，当我动态更改变量 myBoxes.Box1 myBoxes.Box2 和 myBoxes.Box3 的值时，它可以工作完美.


Box1<div ng-class="myBoxes.Box2">Box2</div><div ng-class="myBoxes.Box3">Box3</div>

但是，如果我动态生成 ng-class 变量 "myBoxes.{{boxName}}" 那么它的行为就不像一个变量.我相信会有更好的方法来实现我想要做的事情，但是经过数小时的谷歌搜索/反复试验后，我无法找到它.如果有人可以帮助我，我会很高兴.

解决方案

大功告成，是 myBoxes[boxName] 而不是 myBoxes.{{boxName}}.

像这样:

<html ng-app="myApp"><头><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.angularjs.org/1.1.2/angular.min.js"></script><script type="text/javascript">var myApp = angular.module('myApp', []);myApp.controller('MainCtrl', ['$scope', function($scope){$scope.boxNameList=['Box1','Box2','Box3'];$scope.myBoxes={Box1:红色背景"，Box2: "黑色背景",框 3:黑色背景"}}]);<style type="text/css">.redBackground{背景颜色:红色；}.blackBackground{背景颜色:黑色；}</风格><body ng-controller="MainCtrl"><div ng-repeat="name in boxNameList"><div ng-class="myBoxes[name]">Box1</div>

</html>

Here is snippet from my HTML code.

<div ng-repeat="boxName in boxNameList">
    <div ng-class="myBoxes.{{boxName}}">{{boxName}}</div>
</div>

What I am trying to do: I have created 3 div elements which will be at the top of a screen using the above written snippet. Each div element will be given a shape of a box using css. A box(div) can have either red color as its background or black color as its background.

CSS for the two colors is:

.redBackground{
   background-color: red;
}

.blackBackground{
  background-color: black;
}

Here is a snippet from my controller:

$scope.boxNameList=['Box1','Box2','Box3'];
$scope.myBoxes={
      Box1: "redBackground",
      Box2: "blackBackground",
      Box3: "blackBackground"
}

In this example I have made $scope.myBoxes as a static Json but at runtime I plan to generate Json code so that I can dynamically assign background colors to my boxes.

Problem that I am facing: Well the problem is that I am not able to see the boxes with colors at all. The ng-class variable name in this case as you can see is also generated dynamically. If I do not use ng-repeat and do not dynamically generate ng-class variable name then it works fine. For e.g for the snippet given below when I dynamically change the value of the varibales myBoxes.Box1 myBoxes.Box2 and myBoxes.Box3 then it works perfectly.

<div ng-class="myBoxes.Box1">Box1</div>
<div ng-class="myBoxes.Box2">Box2</div>
<div ng-class="myBoxes.Box3">Box3</div>

However if I generate the ng-class variable dynamically "myBoxes.{{boxName}}" then it doesn't behave like a variable. I am sure there would be a better way to achieve what I am trying to do however I was not able to find that after hours and hours of googling/trial and error. Would be glad if someone could help me.

解决方案

You're almost there, it's myBoxes[boxName] and not myBoxes.{{boxName}}.

Something like this:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.controller('MainCtrl', ['$scope', function($scope){
        $scope.boxNameList=['Box1','Box2','Box3'];
        $scope.myBoxes={
              Box1: "redBackground",
              Box2: "blackBackground",
              Box3: "blackBackground"
        }
    }]);
    </script>
    <style type="text/css">
    .redBackground{
       background-color: red;
    }

    .blackBackground{
      background-color: black;
    }
    </style>
</head>
<body ng-controller="MainCtrl">
    <div ng-repeat="name in boxNameList">
        <div ng-class="myBoxes[name]">Box1</div>
    </div>
</body>
</html>

这篇关于使用 AngularJs 中的表达式为 ng-class 动态生成变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用 AngularJs 中的表达式为 ng-class 动态生成变量 [英] Generating variable for ng-class dynamically using Expression in AngularJs

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使用 AngularJs 中的表达式为 ng-class 动态生成变量 [英] Generating variable for ng-class dynamically using Expression in AngularJs

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭