时间戳

首页 > 解决方案 > 用angularjs修改css类

javascript - 用angularjs修改css类

问题描述

我正在尝试更改输入单选组中选定按钮的类别。每个按钮代表一个座位，然后将显示选择的总数。

   $scope.calculateChecked = function() {
      var count = 0;
      
      angular.forEach($scope.data, function(value) {
        if(value.checked)
          count++;
      });
      
      return count;
   };

这是我的 plunker 示例： http ://plnkr.co/edit/wKzcz6TbYmfbL5mW?open=lib%2Fscript.js&deferRun=1

我想要完成的是，当一个特定的座位被选中（即：4 号座位），那么之前的所有座位（1,2,3）将被自动选择，然后计算为 4 个座位的价格，像这样

我知道我正在使用一个过时的版本，但我仍在学习基础知识。

提前感谢所有帮助和建议，非常感谢:)

标签： javascriptcssangularjs

解决方案

这是我与 Plunker的演示。

在您看来：不要让show属性使用user.checked模型的属性，这样您就不必同步两个值。

<label style="width:100px;padding: 13px;border-radius: 5px;background: dimgray;
       text-align: center;color: white;box-shadow: 0px 0px 17px -4px rgba(140,140,140,1);" 
       ng-class="{checked: user.checked}">
<input type="checkbox" style="display:none" value="1" name="options" 
       ng-model="user.checked" ng-click="userClick(user)"/>
<i class="fas fa-couch h2 px-2"></i><br />
${{price}}
{{ x }}
</label>

控制器：添加此功能

$scope.userClick = function(user) {
    if(user.checked) {
       var i = 0;       
       while($scope.data[i].name != user.name)
       {
          $scope.data[i].checked = true;
          i++;
       };
    }
};

推荐阅读