ng-repeat with checkboxes和capture value

时间:2014-08-08 22:41:39

标签: angularjs checkbox ng-repeat

仍然是角度和js的新手。我有一个清单:

<ul ng-repeat="rate in resources">
    <li> <input type="checkbox" ng-model="isSelected" ng-change="appendList(rate)"> </li>
</ul>

当用户点击它们时,我希望将值推送到列表中:

$scope.rateValues = {
    'rates': {
        'fastrates': {
            'value': '',
        }
    }
};

但是我想像这样在快速添加一个键值对:

$scope.rateValues = {
    'rates': {
        'fastrates': {
            'value': '100',
            'value': '200',
            'value': '300',
            'value': '400',
        }
    }
};

我想我在控制器中坚持使用ng-change功能来处理这个问题。我知道这远非完整,但至少价值会发生变化。我需要检查它是否已被添加,如果是,则将其从键中移除,来自对象的值。如果它未经检查并且检查它。它需要在fastrate obj中创建一个新的“值”:速率对。

  $scope.appendList = function(rate){
      $scope.rateValues.rates.fastrates.value = rate
   }

这是我开始的http://plnkr.co/edit/MhqEp7skAdejdBRpXx2n?p=info。有关如何完成此任务的任何脚本建议吗?

2 个答案:

答案 0 :(得分:2)

您不能多次使用相同的密钥。您可以使用对象数组。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.resources = {value:['100','200','300', '400']}

    $scope.rateValues = {
        'rates': {
            'fastrates': []
        }
    };

  $scope.appendList = function(rate){
      $scope.rateValues.rates.fastrates.push({ value: rate });
  }
});

取消选中此复选框时,请勿忘记删除值。

答案 1 :(得分:1)

取消选中复选框

时,

http://plnkr.co/edit/MhqEp7skAdejdBRpXx2n?p=preview从数组中删除值

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.resources = {
    value: ['100', '200', '300', '400']
  }

$scope.rateValues = {
    'rates': {
        'fastrates': {
            'value': [],
        }
    }
};
  $scope.appendList = function(rate) {



    var index = $scope.rateValues.rates.fastrates.value.indexOf(rate);


    if (index < 0) {
      $scope.rateValues.rates.fastrates.value.push(rate);
    } else {

      $scope.rateValues.rates.fastrates.value.splice(index, 1);
    }


  }
});