程序员经验分享-hwhale

使用 AngularJs 中的 Expression 动态生成 ng-class 变量

2023-11-21

这是我的 HTML 代码的片段。

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

我正在尝试做的事情：我使用上面编写的代码片段创建了 3 个 div 元素，它们将位于屏幕顶部。每个 div 元素将使用 css 赋予一个盒子的形状。框（div）可以使用红色作为背景，也可以使用黑色作为背景。

两种颜色的 CSS 是：

.redBackground{
   background-color: red;
}

.blackBackground{
  background-color: black;
}

这是我的控制器的片段：

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

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

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

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

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


你就快到了，就这样myBoxes[boxName]并不是myBoxes.{{boxName}}.

像这样的东西：

<!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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

angularJS

html

angularjsdirective

使用 AngularJs 中的 Expression 动态生成 ng-class 变量 的相关文章

  • 如何使用 Angularjs 检查模块中的指令或控制器是否可用

    在 angularjs 中 给定一个模块 如何检查给定一个模块是否存在指令 控制器 我有一个模块 我想知道是否已加载某些特定指令 下面是一些示例代码 var module angular module myModule check if c

  • 在 PHP 中合并文件块

    出于教育目的 我想创建文件块上传 你们怎么知道所有块何时上传 我试图从temp并重命名它们 使它们按正确的顺序排列 然后与最后一个块将它们合并在一起 然而 我猜最后发送的并不是最后收到的 所以fopen on chunks 失败 因为它们尚

  • 如何在 MAMP 上显示错误？

    我有 MAMP 但我不知道如何在其上显示错误 当我的 php 代码出现错误时 它只显示空白页 我在 Google 上搜索过 我发现我必须在所有文件夹和版本上将其更改为 display errors on 并将其包含在我的页面上 错误报告 E

  • 如何从谷歌地图中的纬度和经度获取地址位置？ [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 所以我有纬度和经度就像44 4647452 and 7 3553838 我需要获得如下地址 米兰 意大利 str 肯尼迪 89 我怎样才能

  • 如何在点击时添加和删除活动类 - 角度方式

    我正在这样做 div class tiles div 控制器 scope select function item scope selected item scope isActive function item return scope

  • d3js v5 + Topojson v3 关于加入 csv 和 json 的优化

    为了制作地图 我需要将一些值从 csv 导入到 json直接在代码中 为了加载 json 和 csv 文件 我使用 Promise 对象的异步操作 并使用两个循环和一个公共键在 json 文件上添加新属性 for var i 0 i lt

  • 如何使 CSS 样式覆盖 JavaScript 应用的样式

    我动态创建一个 HTML 表 并应用一些样式 var tbl document createElement table tbl id CrewMemberTable document getElementById CrewMemberPan

  • Elasticsearch 前缀匹配消失且未添加 (QueryString)

    结转自Elasticsearch QueryStrings 部分匹配 NOT 查询 https stackoverflow com questions 40100006 elasticsearch querystrings partiall

  • 在 Graal.js 中使用 java 类

    使用 Graal js 如何将 java 类导入到 JS 脚本中 以下代码适用于 Nashorn JJS 但不适用于 Graal js 因为没有Java type 在graal中 我需要在某个时候调用truffle吗 var ArrayLi

  • Bootstrap 的跨浏览器数字微调器/步进器 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个与 Twitter Bootstrap 2 3 集成的数字微调器 使用 HTML5input type number

  • 如何检查浏览器中消失的元素？

    How can I inspect an element which disappears when my mouse moves away 我不知道它的 ID 类别或其他任何信息 但想检查它 我尝试过的解决方案 在控制台内运行 jQuer

  • 显示仅允许数字和小数点的输入？

    有什么方法可以定义一个

  • 以编程方式打开网页并以字符串形式检索其 html 包含内容

    我有一个 Facebook 帐户 我想提取我朋友的照片及其个人详细信息 例如 出生日期 就读学校 等 我能够提取我每个朋友帐户的 Facebook 首页的地址 但我不知道如何以编程方式打开我每个朋友首页的网页并将 html 包含保存为字符串

  • JSON.stringify 对于大型对象来说非常慢

    我在 javascript 中有一个非常大的对象 大约 10MB 当我对其进行字符串化时 需要很长时间 因此我将其发送到后端并将其解析为一个对象 实际上是带有数组的嵌套对象 这也需要很长时间 但这不是我们在这个问题中的问题 问题 我怎样才能

  • ajaxStart 和 ajaxStop 与 fetch API 等效

    我正在尝试将 API 调用从使用 jQuery ajax 迁移到使用 Fetch API 我使用 jQuery ajaxStart 和 ajaxStop 在服务器调用期间显示加载旋转器 我正在运行多个并行服务器请求 我希望旋转器在第一个请求

  • 当来自 Mozilla Firefox 和 MS Edge 上的剪贴板时 Alpha 会变成黑色

    我正在使用代码从这里 https stackoverflow com a 15369753 5875416将剪贴板中的图像粘贴到页面上 它在所有浏览器 Chrome Firefox Edge 和 Opera 中都能正常工作 问题是 当图像是

  • 仅在页面加载时执行 Javascript，而不是回发 (SharePoint)

    我正在尝试在 SharePoint 网站上的自定义页面上加载页面时执行一些 JavaScript 它使用当前用户填充人员选择器 问题是代码也在回发时执行 这是我不希望的 因为它会重置人员选择器的任何更改 我尝试过使用if IsPostBac

  • 当CSS文件存在时，无法在服务器上找到它们[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 当运行本地服务器时 这一切都运行良好 我有 header html 其中包含以下代码 在 public html 目录 与 header h

  • 如何关闭 HTML 输入表单字段建议？

    我所说的建议是指当您开始输入时会出现下拉菜单 并且它的建议基于您之前输入的内容 例如 当我在标题字段中输入 a 时 它会给我大量的建议 这非常烦人 如何关闭此功能 你想要的是禁用 HTMLautocomplete属性 在这里设置 autoc

  • 嵌套对象的 setState

    我有一个嵌套对象作为状态 并且在组件中有一个表单 我正在考虑每次用户在表单中输入某些内容时更新状态 并且为了避免为每个输入创建许多函数 我正在考虑使用 switch 创建单个函数 使用 switch 创建单一函数是个好主意吗 如何更新对象的

随机推荐

热门标签