如何使用ng-model綁定動態複選框的值？

我想使用'ng-model'以與使用'name'屬性類似的方式將動態複選框的值（不是布爾值true和false）放入數組的形式。這個數組現在被放入一個JSON對象中。如何使用ng-model綁定動態複選框的值？

<td> 
    <span ng-repeat="operation in operations_publish"> 
      <input type="checkbox" name="operations" ng-model="operations" value="{{operation}}"/> 
      {{operation}} 
    </span> 
</td>

以下是我的函數張貼JSON對象：

$scope.send = function() { 
    console.log("test"); 
    var dataObj = { 
     "operationType" : $scope.operationType, 
     "conceptModelID" : $scope.conceptID, 
     "requestor" : $scope.requestor, 
     "status" : "new", 
     "requestDateTime" : null, 
     "lastExecutedDateTime" : null, 
     "completedDateTime" : null, 
     "instructions" : $scope.operations 

    }; 
    console.log(dataObj); 
    console.log(dataObj.instructions); 
    var response = $http.post('PostService', dataObj); 
    response.success(function(data, status, headers, config) { 
     $scope.responseData = data; 
    }); 
    response.error(function(data, status, headers, config) { 
     alert("Exception details: " + JSON.stringify({ 
      data : data 
     })); 
    });

但 'dataObj.instructions' 是不確定的，當我運行的代碼。請提出是否這是正確的做法，以及我在這裏錯過了什麼。

來源

2015-11-30 Manoj Suthar

你有'ng-model =「operations」'但是'operation'作爲ng-repeat中的迭代器。 –

您必須將每個輸入綁定到不同的值。目前所有人都通過ng-model="operations"將其綁定到operations的範圍內。

我建議你在你的控制器這樣創建數組operations：

$scope.operations = new Array($scope.operations_publish.length);

然後，你可以綁定複選框各指數本陣：

<span ng-repeat="operation in operations_publish"> 
    <input type="checkbox" 
      name="operations" 
      ng-model="operations[$index]" 
      value="{{operation}}"/> 
    {{operation}} 
</span>

這會給你一個在所有檢查的索引處使用true排列。如果你再想選定值作爲一個字符串數組，你可以收集他們是這樣的：

function getSelected() { 
    return $scope.operations_publish.filter(function (x,i) { 
     return $scope.operations[i] 
    }); 
}

檢查this fiddle完整的代碼。

來源

2015-11-30 20:01:41 lex82

謝謝。它回答了我的問題，現在我正在獲取數組中的值。但是，當我試圖將JSON對象發佈到我的彈簧控制器時，出現錯誤：400（錯誤請求）。任何想法可能造成的？ –

不，對不起，沒有進一步的信息就很難說出來。您是否在瀏覽器中檢查了請求？我的意思是，獲取請求的實際URL和HTTP參數？ – lex82

你嘗試過嗎？

<input type="checkbox" ng-model="cbValues[$index]" 
    ng-repeat="value in cbValues track by $index" />

工作對我來說： http://plnkr.co/edit/s0rZiMeL4NvpFZ3C9CIL?p=preview

來源

2015-11-30 19:48:57 Igloob

根據你的例子列出，已綁定您的ng-model來表達operations，但是你必須將它綁定到單獨的迭代器operation（從）ng-repeat="operation in operations_publish" 。

然後可以設置數據在數據記錄對象：

var dataObj = { 
    "operationType" : $scope.operationType, 
    "conceptModelID" : $scope.conceptID, 
    "requestor" : $scope.requestor, 
    "status" : "new", 
    "requestDateTime" : null, 
    "lastExecutedDateTime" : null, 
    "completedDateTime" : null, 
    "instructions" : $scope.operations_publish 
};

數據中默認角結合的多方位因此：

operations_publish =>結合經由迭代operation
operation =>通過ng-model綁定到複選框值
當值該複選框會發生變化，您將更改它綁定到的變量以及該變量從中迭代的集合。

來源

2015-11-30 19:51:15

如何使用ng-model綁定動態複選框的值？

回答

相關問題