是否可以在 ng-repeat 中传递变量？答案

【问题标题】：Is it possible to pass a variable in ng-repeat?是否可以在 ng-repeat 中传递变量？
【发布时间】：2026-02-20 15:05:01
【问题描述】：

我是 Angular 新手，想知道是否可以将 ng-repeat 指令中的 firstP 替换为变量？我正在使用 AngularJS v1.6.6

ng-repeat="option in people['firstP']"

var people = {
    "firstP": [
        "",
        "James",
        "Jack",
    ], 
    "SecondP": [
        "",
        "Bill",
        "Bob",
    ]
};

【问题讨论】：

你试过了吗？喜欢option in people[someVariable]？
是的，我试过了。没有运气。
对 ng-repeat 使用键值对。它可以在各个方面为您提供帮助。
你能告诉我，你想做什么......完全有问题的描述。那么就很容易解决了
@user3046739 您使用的是哪个版本的 Angular？

标签： javascript arrays angularjs loops object

【解决方案1】：

据我了解，使用 $scope 变量在控制器中定义数组：在控制器中：

app.controller('nameCtrl', function($scope) {
    $scope.people = { firstP: ['james', 'jack'] };
});

在 HTML 中：

<div ng-controller="nameCtrl">
    <ul>
            <li ng-repeat="option in people.firstP">{{option}}</li>
        </ul>

</div>

试试这个。希望它有帮助..！

【讨论】：

people.firstP 和people["firstP"] 完全一样，不能解决OP的问题

【解决方案2】：

我认为您必须将人员对象分配给 $scope 变量才能访问 html 中的人员对象。

HTML

<html ng-app="myApp" ng-controller="testCtrl">
  <ul>
        <li ng-repeat="name in people[element]">{{name}}</li>
    </ul>
</html>

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

var testCtrl = function($scope){
    $scope.element = 'firstP';
    $scope.people = {
       "firstP" : [
          "Jake",
          "James",
          "Jack",

      ], 
      "SecondP" : [
          "",
          "Bill",
          "Bob",

      ]};
}

app.controller('testCtrl',['$scope',testCtrl]);

查看https://jsfiddle.net/0zk4mfak/6/

【讨论】：

【解决方案3】：

是否可以将 ng-repeat 指令中的 firstP 替换为变量？

是的，可以将firstP 替换为变量，毕竟您只是在Angular 中使用普通的javascript 对象括号表示法。

解决方案：

如果您尝试动态显示people 对象内容，那么您可以这样做：

<div ng-repeat="(key, value) in people">
  <select>
    <option ng-repeat="option in people[key]">{{option}}</option>
  </select>
</div>

首先您需要遍历people 对象keys，然后为每个key 获取相关的array，然后遍历每个array 以显示其内容。

注意：

请注意，我们可以直接在ng-repeat 中将people[key] 替换为value，这样它就变成了ng-repeat="option in value"。

我只是使用people[key] 来回答你的具体问题。

演示：

这是一个现场工作的Plunker。

【讨论】：

【解决方案4】：

您的代码看起来很可疑，好像它会填充一个选择（下拉）框。如果是这种情况，请使用ng-options for Angular 1:

鉴于 $scope 上的这个项目数组：

$scope.items = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

这将起作用：

<select ng-options="item as item.label for item in items track by item.id"
        ng-model="selected"></select>

$scope.selected = $scope.items[0];

或ngFor in Angular 2，如this answer：

<select name="selectmake" [(ngModel)]="makeListFilter">
    <option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar">
        {{muscleCar.name}}
    </option>
</select>

【讨论】：