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

Question

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

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

问题来了

我只是希望在检查输入时 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);
}   

Answer 1

这个解决方案提供了:

• 来自数组内复选框和输入的多个值
• 单击输入时，值将作为数组存储到 $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>