NG重复不起作用，但可以看到单个项目

我在一系列对象上对NG-Repeat有一个问题：

假人

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

i可以获取对象的数量（{{factions.length}}或单个项目{{{cattions [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>

您缺少 =属性与其值之间的 CC_1字符。

'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>

相关内容

最新更新

热门标签：