Angular JS ng-repeat 没有按预期工作答案

【问题标题】：Angular JS ng-repeat not working as expectedAngular JS ng-repeat 没有按预期工作
【发布时间】：2017-02-09 14:13:27
【问题描述】：

我有一个这样的控制器：

controller('BreadCrumbs', ['$scope','crumble','$rootScope', function ($scope,crumble,$rootScope) {    
    function init (){
        $scope.ui={};
        $scope.ui.mdBreadCrumbs=[{"path":"path1","label":"label1"}];     
        $rootScope.oldScope=$scope;
    }
    $scope.setBreadCrumbs=function() {        
        $scope.ui.mdBreadCrumbs=crumble.trail;    
    } 
    init();
}]);

在 HTML 中，

<ol id="breadCrumbList"  ng-controller="BreadCrumbs as bcrmbs">
 {{ui.mdBreadCrumbs}}
  <li ng-repeat="bc in ui.mdBreadCrumbs">
    <a ng-href="{{bc.path}}">{{bc.label}}</a>
  </li>
</ol>

{{ui.mdBreadCrumbs}} 正在显示类似[{"path":"path1","label":"label1"}] 的内容。但是在 ng-repeat 中，它不是迭代的。使用 $scope.setBreadCrumbs 我输入了更多值，但 ngRepeat 仍然不起作用。

有人知道为什么它不起作用吗？

【问题讨论】：

你的预期输出是什么？
尝试将ng-controller="BreadCrumbs as bcrmbs"更改为ng-controller="BreadCrumbs"

标签： javascript angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

改变

<ol id="breadCrumbList"  ng-controller="BreadCrumbs as bcrmbs">

到

<ol id="breadCrumbList"  ng-controller="BreadCrumbs">

演示

var app = angular.module('app', []);
app.controller('BreadCrumbs', ['$scope', function($scope) {
  $scope.ui = {};
  $scope.ui.mdBreadCrumbs = [{
    "path": "path1",
    "label": "label1"
  }];
}]);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body ng-app="app" ng-controller="BreadCrumbs">
  <ol id="breadCrumbList">
 {{ui.mdBreadCrumbs}}
  <li ng-repeat="bc in ui.mdBreadCrumbs">
    <a ng-href="{{bc.path}}">{{bc.label}}</a>
  </li>
</ol>
  <script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
  <script type="text/javascript " src="MainViewController.js "></script>
</body>
</html>

【讨论】：

【解决方案2】：

您必须更改 HTML 中的某些内容，并且您的 HTML 应该是这样的：

<div ng-app>
  <div ng-controller="BreadCrumbs">
      <div ng-repeat="bc in ui.mdBreadCrumbs">
          <a ng-href="{{bc.path}}">{{bc.label}}</a>
      </div>
  </div>
</div>

【讨论】：