Angular js输入框如何通过ng-model而无需更改呢？

Question

i am trying to push an ng-model value inside an ng-controller array, using the input box.

It seems that when i check the box the ng-model propriety change:

HERE THE PROBLEM

I just want that ng-model propriety won't change when the input is checked, here my code

json model

[
 {
    "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 INSIDE CONTROLLER

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

Answer 1

Model Name for value and checkbox model should not be the same.

when you change checkbox - the model inside cssframework object also is updated.

Please try something like that (look at model in checkbox input):

<div ng-repeat="cssframework in voce.framewrok">
        <input type="checkbox" ng-model="costo"  ng-change="AggiornaTotale({{cssframework.costo}})"/>  
        <span>{{cssframework.name}}........<b>{{cssframework.costo | currency}}</b></span>
</div>  

At the end i think that ng-model in checkbox is unnecessary. You don`t use it in that example.

Answer 2

Well this solution provides:

• multiple value from checkboxes and inputs inside an array
• Values are stored to the $scope.selectedVoices as array when clicking the input

Why ever you want that kind of logic. This solution provides all stuff you talked about.

  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> 

Answer 3

Basically what checkbox box does is that on check it makes ng-model value true and on uncheck ng-model value false. You can use ng-true-value to set value says 40 for check box when it is checked. Along with this used ng-model value as shown below:

 <div class="row" ng-repeat="voce in voices.data">
    <div ng-repeat="cssframework in voce.framewrok">
        <input type="checkbox" ng-model="cssframework.costo[$index]" ng-true-value="voce"/>  
    </div>  
</div>

So that when to get the value of "cssframework.costo" in controller like this console.log($scope.cssframework.costo) you will get a array.