AngularJS 复选框答案

【问题标题】：AngularJS CheckboxAngularJS 复选框
【发布时间】：2018-01-25 14:45:29
【问题描述】：

我偶然发现了 AngularJS Material 网站，并且正在玩一些教程。最后一个关于复选框的例子让我有点困惑(this tutorial site)

<div flex="100" flex-gt-sm="50" layout="column">
  <div >
    <fieldset class="standard">
      <legend>Using &lt;input type="checkbox"&gt;</legend>
      <div layout="row" layout-wrap flex>
        <div ng-repeat="item in items" class="standard" flex="50">
          <label>
            <input type="checkbox" ng-checked="exists(item, selected)"
                   ng-click="toggle(item, selected)"/>
            {{ item }}
          </label>
        </div>
      </div>
    </fieldset>
  </div>
</div>

我想知道是否可以将 html 中的复选框命名为不同的名称，例如 (A,B,C,..) ，但仍然可以使用控制器中的数字 (1,2,3,..)？

angular.module('checkboxDemo2', ['ngMaterial']).controller('AppCtrl', function($scope) {

$scope.items = [1,2,3,4,5];
  $scope.selected = [];

  $scope.toggle = function (item, list) {
    var idx = list.indexOf(item);
    if (idx > -1) {
      list.splice(idx, 1);
    }
    else {
      list.push(item);
    }
  };

  $scope.exists = function (item, list) {
    return list.indexOf(item) > -1;
  };
});

【问题讨论】：

标签： html angularjs angular-material

【解决方案1】：

您的数组只有数字，因此 ng-repeat 显示该数字

如果你想要 A,B,C..，那么你的数组应该是这样的

$scope.items = [{name:'A',value:1},[{name:'B',value:2},[{name:'C',value:3},[{name:'D',value:4}];

你的 html 复选框可以是

<input type="checkbox" ng-checked="exists(item, selected)"
                   ng-click="toggle(item, selected)"/>
            {{ item.name }}

【讨论】：

这对我有用：我只想补充一点，我在语法上做了一些更改：$scope.items = [{name:'A',value:1},{name:'B ',value:2},{name:'C',value:3},{name:'D',value:4}];

【解决方案2】：

您可以通过在控制器中创建一个函数来获取与项目对应的字母（A对应于1，B到 2 等等）像这样：

$scope.intToChar = function(int){
    return String.fromCharCode('A'.charCodeAt(0) + int - 1)
}

在你的 ng-repeat 中，你只需要显示 {{intToChar(item)}} 而不是显示 {{item}}

Here 是一个工作中的笨蛋

【讨论】：

【解决方案3】：

您可以使用String.fromCharCode 动态添加字符

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.items = [1,2,3,4,5];

 $scope.fullArr = $scope.items.map(o=>{
     return {
        name : String.fromCharCode(64+o),
        num : o
     }
 })
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div ng-repeat="item in fullArr" class="standard" flex="50">
          <label>
            <input type="checkbox" name="{{item.name}}" ng-checked="exists(item, selected)"
                   ng-click="toggle(item, selected)"/>
            {{ item.num }}
          </label>
        </div>
</div>

【讨论】：