在 Angular 中显示复选框值

【问题标题】：Show checkbox values in Angular在 Angular 中显示复选框值
【发布时间】：2014-03-22 20:44:15
【问题描述】：

我正在寻找一种方法来显示带有在表单中选中的复选框值的结果字符串。我找不到办法。

澄清一下：

[ ] 苹果

[X] 柠檬

[ ] 橙子

[X] 酸橙

已选择：柠檬、酸橙

我的复选框具有以下语法：

<input type="checkbox" id="{{fruit}}" ng-model="value1" ng-bind="fruit"/>

我正在从 JSON 文件中获取值列表。

有人知道我怎样才能做到这一点吗？

【问题讨论】：

标签： json angularjs checkbox

【解决方案1】：

这是我的尝试。使用 ngChange 指令绑定回调：

在您的控制器中，更新所选水果的列表并显示您的消息：

  $scope.selectedFruits = [];
  $scope.message = "";

  function renderMessage(){
     $scope. message ='';
    for (var i = 0; i <  $scope.selectedFruits.length; i++)
      $scope. message +=  $scope.message ? ", "+$scope.selectedFruits[i] : $scope.selectedFruits[i];
       $scope.message = "Selected : "+ $scope.message
   return $scope.message;
  }; 

  $scope.updateFruits = function(name) {
   var alreadyExisting = false;
   for (var i = 0; i < $scope.selectedFruits.length; i++) {
      if (name === $scope.selectedFruits[i])
      {
         $scope.selectedFruits.splice(i, 1);
         alreadyExisting = true;
      }
     }
   if (!alreadyExisting)
     $scope.selectedFruits.push(name);
   renderMessage();
  };

编辑：我中午很着急，无法为您提供功能版本。我更新了我的代码并创建了一个 plnkr：http://plnkr.co/edit/3YOAzV

【讨论】：