javascript - Angular js输入框如何在不改变的情况下传递ng-model呢?

标签 javascript angularjs checkbox

我正在尝试使用输入框将 ng-model 值推送到 ng-controller 数组中。

似乎当我选中该框时,ng-model 属性会发生变化:

问题来了

enter image description here

enter image description here

enter image description here

我只是希望在检查输入时 ng-model 属性不会改变, 这是我的代码

json模型

[
 {
    "nomeservizio" : "Frameworks",
    "framewrok":[
        {
            "name":"nessuno",
            "costo": 40
        },
        {
            "name":"bootstrap",
            "costo": 0
        }
    ]
}]

HTML

    <div class="row" ng-repeat="voce in voices.data">
    <h4 style="color:#000;">{{voce.nomeservizio}}</h4>
    <div ng-repeat="cssframework in voce.framewrok">
        <input type="checkbox" ng-model="cssframework.costo"  ng-change="AggiornaTotale({{cssframework.costo}})"/>  
        <span>{{cssframework.name}}........<b>{{cssframework.costo | currency}}</b></span>
    </div>  
</div>

<div class="row">
    <h3>TOTALE: {{selectedVoices}}</h3>
</div>

JS 内部 Controller

    $scope.AggiornaTotale = function(param) {
    $scope.selectedVoices = [];
    $scope.selectedVoices.push(param);
}   

最佳答案

这个解决方案提供了:

  • 来自数组内复选框和输入的多个值
  • 单击输入时,值将作为数组存储到 $scope.selectedVoices

为什么你想要这种逻辑。该解决方案提供了您谈到的所有内容。

    myApp = angular.module('myApp', []);
    myApp.controller('testController', function ($scope) {

        $scope.selectedVoices = [];
        $scope.framework = [{
                    "name":"nessuno",
                    "costo": 40
                }, {
                    "name":"bootstrap",
                    "costo": 0
                }, {
                    "name":"bootstrap",
                    "costo": 20
                }
            ];

        $scope.click = function (key) {
            $scope.selectedVoices.push($scope.framework[key].costo);
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="testController">
    <div ng-repeat="(key, item) in framework">
        <input type="checkbox" ng-click="click(key)" />
        <span>{{item.name}} {{item.costo | currency}}</b></span>
    </div>
    <h1> {{ selectedVoices }}</h1>
</div>

关于javascript - Angular js输入框如何在不改变的情况下传递ng-model呢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42328437/

相关文章:

javascript - 如何在javascript中获取全局命名空间中的对象名称

javascript - 如何创建CAF接收器?

angularjs - 如何在 Intellij 中调试 Protractor ?

javascript - 使用复选框过滤到新的对象数组 - javascript

javascript - JavaScript 多维数组中的最大值

javascript - 如何在我的网站上添加推特推文功能?

javascript - 如何通过检查 JavaScript 中的属性值来查找数组中对象的索引?

angularjs - 有没有办法仅在 ng-view 渲染时渲染 ng-view 之外的 View ?

javascript - 如何使用 React + Flux 快速渲染 >10000 个项目?

mysql - 如何为复选框创建 SQL 表?