如果遗漏了任何物体,AngularJS ng-repeat打印0

时间:2017-04-14 11:25:48

标签: javascript html angularjs arraylist

第二个数组中遗漏了一个对象。使用ng-repeat,我想打印0.请找到以下代码

<div ng-repeat="item in items">
      {{item}}
      <div>
        <h3>{{item[0].name}}</h3>
        <div>
          <article>
            {{item[0].tc}}
          </article>
          <article>
            {{item[1].tc}}
          </article>
          <article>
            {{item[2].tc}}
          </article>
        </div>
      </div>
    </div>

code in plunker

4 个答案:

答案 0 :(得分:0)

打印对象或零而不是

  <article>
    {{item[2].tc || 0}}
  </article>

或者

  <article>
    {{item[2].tc ? item[2].tc : 0}}
  </article>

答案 1 :(得分:0)

在plunkr中查看你的数组 - 好像你必须遍历items数组两次:

classNames

嵌套的ng-repeats - 每个items.array一个,然后是该数组中的每个对象。假设每个对象具有相同的名称 - 它可以获得h3的第一个 - 但是然后使用嵌套的ng-repeat将允许检索数组中的对象 - 无论它们的数量如何。

//array from the plunkr
    $scope.items = [
      [{name:"a",tc:100}, {name:"a",tc:101}, {name:"a",tc:102}],
      [{name:"d",tc:103}, {name:"d",tc:104}],
      [{name:"f",tc:105}, {name:"f",tc:106}, {name:"f",tc:107}]
    ]

答案 2 :(得分:-1)

例如,如果错过item[0],则item[0].name将导致错误Can not read property name of undefined。您需要为数据设置默认值或使用{{(item[0] || {}).name}}

答案 3 :(得分:-1)

<body ng-controller="MainCtrl">
    <div ng-repeat="item in items">
      {{item}}
      <div>
        <h3>{{item[0].name}}</h3>
        <div>
          <article>
            {{item[0].tc}}
          </article>
          <article>
            {{item[1].tc}}
          </article>
          <article>
            <span ng-hide="item[2].tc">0</span>
            {{item[2].tc}}
          </article>
        </div>
      </div>
    </div>
  </body>