Question

我有一个带有ng-repeat的div：

<div ng-repeat="fruit in fruits">
  <input type="checkbox" ng-model="this.value" ng-checked="false">{{fruit.code}} - {{fruit.short_name}}
</div>

这里的furits是数组对象，它包含字段代码short_name。

furits: {
         {
          code : code_value1,
          short_name :short_name_value1
         },
         {
          code : code_value2,
          short_name :short_name_value2
         },...
         {
          code : code_value..,
          short_name :short_name_value..
         },
       }

我想在提交按钮单击后获取复选框的代码，并将这些代码插入新数组中。

并将相同的阵列发送到服务器以完成任务。

请帮我解决这个问题。

Answer 1

<div ng-repeat="fruit in fruits">
  <input type="checkbox" ng-model="fruit.isChecked" />{{fruit.code}} - {{fruit.short_name}}
</div>
<input type="button" ng-click="save()" value="SAVE" />

在你的控制器内：

$scope.save = function(){
    var myFruits = [];
    for(i = 0; i < $scope.fruits.length; ++i){
        if ($scope.fruits[i]. isChecked)
            myFruits.push(fruit.code);
    }
}

Answer 2

<div ng-repeat="fruit in fruits">
  <input type="checkbox" ng-model="fruit.isSelected" />{{fruit.code}} - {{fruit.short_name}}
</div>
<input type="button" ng-click="sendServer()" value="Submit" />

你的控制器方法就像，

 $scope.sendServer = function(){
  $scope.checkedFruits = [];
  for(i = 0; i < $scope.fruits.length; ++i){
    if ($scope.fruits[i].isSelected)
        $scope.checkedFruits.push(fruit.code);
  }
  $scope.postData();
 }

//Send array to server via web service with parameter FruitsCode

 $scope.postData = function () {
   $http.post('http://your.webservice/', {FruitsCode:$scope.checkedFruits}).success(
    function(data){
        $scope.response = data
    })

}

希望这会对你有帮助！

ngRepeat和复选框

2 个答案: