【问题标题】:Modifying css class with angularjs用angularjs修改css类
【发布时间】:2020-12-31 14:56:01
【问题描述】:

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

   $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个座位的价格,@ 987654322@

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

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

【问题讨论】:

    标签: javascript css angularjs


    【解决方案1】:

    这是我与 Plunker 的Demo

    在您看来:不要使用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++;
           };
        }
    };
    

    【讨论】:

    • 哇!非常感谢您的回复,伙计...它确实有效..
    • 虽然,请原谅我的新手......我试图在我的代码中实现你的代码,它不起作用......我什至尝试使用一个简单的文件,试图解决可能存在函数冲突或一些问题与我的排序,但仍然无法工作..这是你从头开始实施的 plunker..prestigeair.bisapunya.com/cindy?你能启发我吗?被困了几天试图找出问题所在......
    • 您提到的页面上还有其他问题。要使用 bootstrap.min.js,您需要在 html 代码之前添加 jquery 库。这在 Plunker 中不会发生,因为它们会在您的代码之外加载 jquery。
    • 是的,现在已经添加了 jquery cdn。仍然不起作用.. plunker 还缺少什么吗?
    • 抱歉,我已经用userClick() 函数的新版本更新了我的答案。部署到您的网站后应该可以工作。 Plunker 在运行相同的 Angularjs sn-p 时表现不同,并且它使用的是较新版本的框架。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-25
    • 1970-01-01
    相关资源
    最近更新 更多