CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Gregism
Gregism

Reputation: 392

Ng-repeat not working but can see individual items

I'm having an issue with ng-repeat on an array of objects:

dummy.json

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

I can get the number of objects({{factions.length}} or individual item {{factions[0].name}}) and print them individually, but the ng-repeat doesn't create multiple options in the select. I see some other versions of the same question, but they aren't resolved.

I'm including the controller in the body. The scope variable is available, but I'm missing something... Please take a look. Thanks in advance.

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>

Upvotes: 0

Views: 67

Answers (1)

oaleynik
oaleynik

Reputation: 685

You are missing the = character between ng-repeat attribute and its value.

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

Upvotes: 4

Related Questions