复杂对象上的角度重复重复

时间:2017-01-04 23:39:55

标签: javascript angularjs

我有一个包含2个对象的对象。

每个对象都包含一个包含2个对象的数组:

ctrl.mainArray = {
  outsideObject_1: {
    insideArray = [
      insideObject_1: { value1: 'someValue', value2: 'someOtherValue' },
      insideObject_2: { value1: 'someValue', value2: 'someOtherValue' }
    ]
  },
  outsideObject_2: {
    insideArray = [
      insideObject_1: { value1: 'someValue', value2: 'someOtherValue' },
      insideObject_2: { value1: 'someValue', value2: 'someOtherValue' }
    ]
  };
};

我想在我的模板中显示insideObject_x的值:

<ul>
  <li ng-repeat="item in ctrl.mainArray track by item.insideArray[$index]>
    <!-- CASE #1 -->
    First value: {{item.insideArray[0].value1}}

    <!-- CASE #2 -->
    First value: {{item.insideArray[$index].value1}}
  </li>
</ul>

CASE #1中,我可以从每个insideArray中的FIRST OBJECT打印出FIRST值。我想从每个value1

打印insideObject_x

CASE #2中我可以从第一个insideArray中的第一个对象打印出FIRST值。

我做错了什么?我应该打印value1,不同时间。

1 个答案:

答案 0 :(得分:2)

我不明白你想要什么作为输出,但假设你想在所有value1内的每个对象上打印insideArray属性的值,我认为你应该处理脚本方面的逻辑。

<强> HTML

<ul ng-app="myApp" ng-controller="mainController as mainCtrl">
  <li ng-repeat="value in mainCtrl.values track by $index">
    First value: {{value}}
  </li>
</ul>

JavaScript(Angular)

(() => {
angular.module("myApp", [])
    .controller("mainController", function() {
        let ctrl = this;

        ctrl.mainObj = {
            outsideObject_1: {
                insideArray : [
                    { value1: 'someValue', value2: 'someOtherValue' },
                    { value1: 'someValue', value2: 'someOtherValue' }
                ]
            },
            outsideObject_2: {
                insideArray : [
                    { value1: 'someValue', value2: 'someOtherValue' },
                    { value1: 'someValue', value2: 'someOtherValue' }
                ]
            }
        };

        ctrl.values = [];

        for (let obj in ctrl.mainObj) {
            for(let val of ctrl.mainObj[obj].insideArray) {
                ctrl['values'].push(val.value1);
            }
        }
});
})();

CodePen: http://codepen.io/cod3rguy/pen/ggbMKz?editors=1010

如果您想要value1中对象上的所有属性值(value2insideArray等),您可以轻微修改填充{{1}的逻辑上面代码中的数组如下: -

values