Angular js輸入框如何通過ng-model而無需更改呢？

Question

我正在嘗試使用輸入框在ng-controller數組中推送ng-model值。

似乎當我選中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內置控制器

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

Answer 1

值的模型名稱和復選框模型不應相同。

更改復選框時-cssframework對象內部的模型也會更新。

請嘗試類似的操作（在復選框輸入中查看模型）：

<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>  

最后，我認為復選框中的ng-model是不必要的。 在該示例中，您不會使用它。

Answer 2

這個解決方案可以提供：

• 復選框和數組內輸入的多個值
• 單擊輸入時，值作為數組存儲到$ 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> 

Answer 3

基本上，復選框的作用是選中時將ng-model值設為true，而取消選中ng-model值則設為false。 選中該復選框時，可以使用ng-true-value設置值為40。 連同此使用的ng-model值，如下所示：

 <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>

這樣，當在像console.log（$ scope.cssframework.costo）這樣的控制器中獲取“ cssframework.costo”的值時，您將獲得一個數組。