Question

我在对象数组上遇到ng-repeat问题：

dummy.json

[
  {"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
  {"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
]

我可以获取对象的数量（{{factions.length}}或单个项目{{factions [0] .name}}）并单独打印，但ng-repeat不会创建多个选项选择。我看到同一个问题的其他一些版本，但它们没有得到解决。

我将控制器包含在体内。范围变量可用，但我遗漏了一些东西......请看一下。提前谢谢。

tree.js

'use strict';

angular.module('tree',[])
  .controller('treeCtrl', function ($scope,$http) {
        $scope.factions = [
  {"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
  {"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
];

    //$http.get('/dummy.json')
    //  .success(function(data){
    //    console.log(data);
    //    $scope.factions = data;
    //  })
  });

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tree">
<head>
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Trees</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="app/styles/techtree.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
</head>
<body ontouchstart data-ng-controller="treeCtrl">
  
  <div class="section">
    <div class="container">
      <form>
        <div class="row">
          <div class="col-sm-4">
            <div class="form-group">
              <label for="factionSelect">Faction  {{factions.length}}</label>
              <select id="factionSelect" class="form-control">
                <option ng-repeat"faction in factions" value="{{$index}}">{{faction.name}}</option>
              </select>
            </div>
          </div>
        </div>
      </form>
    </div>
    {{factions[1].name}}
  </div> 

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
  <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>

Answer 1

您遗漏了=属性及其值之间的ng-repeat字符。

'use strict';

angular.module('tree',[])
  .controller('treeCtrl', function ($scope,$http) {
        $scope.factions = [
  {"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
  {"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
];

    //$http.get('/dummy.json')
    //  .success(function(data){
    //    console.log(data);
    //    $scope.factions = data;
    //  })
  });

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tree">
<head>
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Trees</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="app/styles/techtree.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
</head>
<body ontouchstart data-ng-controller="treeCtrl">
  
  <div class="section">
    <div class="container">
      <form>
        <div class="row">
          <div class="col-sm-4">
            <div class="form-group">
              <label for="factionSelect">Faction  {{factions.length}}</label>
              <select id="factionSelect" class="form-control">
                <option ng-repeat="faction in factions" value="{{$index}}">{{faction.name}}</option>
              </select>
            </div>
          </div>
        </div>
      </form>
    </div>
    {{factions[1].name}}
  </div> 

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
  <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>

Ng-repeat不起作用，但可以看到单个项目

1 个答案: