AngularJS複選框

Question

我遇到了AngularJS材料的網站，並與一些教程玩耍。關於複選框最後一個例子弄得我有點(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; 
    }; 
}); 

Answer 1

你的陣列，具有唯一的編號，因此NG-重複顯示，數字

如果你想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 }} 

Answer 2

您可以通過在控制器中創建一個函數來獲取字母對應的字母項（對應於 一個，乙到等）是這樣的：

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

而在你的NG-重複，而不是顯示{{item}}你只需要顯示{{intToChar(item)}}

Here是工作plunker

Answer 3

您可以添加使用動態字符

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>