javascript - Angular JS : Unordered List Elements not getting displayed

Question

我尝试使用 Controller 和 View 页面创建无序列表。请找到下面的 Controller :

(function() {
  'use strict';

  angular
    .module('app.sdb')
    .controller('SdbController', SdbController)

  SdbController.$inject = ['logger'];
  /* @ngInject */
  function SdbController(logger) {
    var vm = this;
    vm.models = {
      selected: null,
      lists: {"A": [], "B": []}
    };

    for(var i=1;i<=3;i++) {
      vm.models.lists.A.push({label: "Item A" + i});
      vm.models.lists.B.push({label: "Item B" + i});

    }

    activate();

    function activate() {
      vm.title = 'Safe Digital Board';
      logger.info('Activation', 'Sdb Controller', 'Template Rendered');
    }
  }
})();

请找到下面的标记:

<div>
<ul>
  <li ng-repeat="item in vm.models"> Hello {{item.label}} </li>

</ul>
</div>

但我只得到以下 O/P:

• 你好
• 你好

寻求帮助...请指教

Answer 1

问题出在您的模型对象上。你的 ng-repeat 应该是 ng-repeat="item in vm.models.lists.A"请找一个工作plunker

  <div>
    <ul>
      <li ng-repeat="item in vm.models.lists.A"> Hello {{item.label}} </li>
    </ul>
  </div>

要显示这两个列表，您需要编写如下所示的模板:

  <div>
    <ul ng-repeat="items in vm.models.lists">
      <li ng-repeat="item in items"> Hello {{item.label}} </li>
    </ul>
  </div>