AngularJS:在NG重复中，将功能输出分配给多个元素

Question

给定我有一个 function GenerateRandomId()，它在每个呼叫上返回一些随机字符的新字符串，对@id属性有效。

如何完成以下操作？(注意：此代码不起作用(

<li ng-repeat="item in $ctrl.items">
    {{ randomId = $ctrl.GenerateRandomId() }}
    <input id="{{ randomId }}" type="checkbox" />
    <label for="{{ randomId }}">...</label>
</li>
//in the controller
var self = this;
self.GenerateRandomId = function () {
  return Math.random().toString(36).substr(2, 10);
};

编辑

1. 在randomId的前面删除了" var"。
2. 提供了控制器内部的GenerateRandomId()功能。

Answer 1

从HTML代码中删除" var"。尝试以下代码

<li ng-repeat="item in $ctrl.items">
{{ randomId = GenerateRandomId() }}
<input id="{{ randomId }}" type="checkbox" />
<label for="{{ randomId }}">...</label>
</li>

Answer 2

这样的事情应该做到。您可以声明该功能并将其添加到data-id和for。

var random = angular.module("random", []);
var ctrl = random.controller("Ctrl", Ctrl);
function Ctrl() {
  var self = this;
  self.number = "";
  self.items = [1, 2, 3];
  self.randomIntegersGenerator = function(){
        var randomNumbers = [];
        for(var i = 0; i < self.items.length; i++ ){
            randomNumbers[i] = randomId();
        }
     return randomNumbers;
  }
  self.randomIntegers = self.randomIntegersGenerator();
 }
 function randomId() {
    return Math.random().toString(36).substr(2, 10);
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="random">
  <div ng-controller="Ctrl as ctrl">
    <li ng-repeat="random in ctrl.randomIntegers">
     
     
      <input data-id= {{random}}  type="checkbox" />
      <label for= {{random}} >Something</label>
      {{random}}
      
    </li>
  </div>
</div>

Answer 3

尝试此

<li ng-repeat="item in $ctrl.items" ng-init="randomId = $ctrl.GenerateRandomId()">
    <input id="{{ randomId }}" type="checkbox" />
    <label for="{{ randomId }}">...</label>
</li>