AngularJS OrderBy对象内数组第一个元素的数组值

我有一个如下所示的数组：

$scope.items = {
  books: [
   {position: 1},
   {title: 'Harry Potter'},
   {title: 'Lord of The Rings'}
  ],
  movies: [
   {position: 0},
   {title: 'Mission Impossible'},
   {title: 'Star Wars'}
  ]
};

我想按数组项的第一个元素排序，这是我尝试的：

<div class="item" ng-repeat="item in items | orderBy:items[0].position">
  {{item}}
</div>

{{item}}

---

但这会导致语法错误。

只需使用字段名即可

<div class="item" ng-repeat="item in items | orderBy:'position'">

---

只需使用字段名

<div class="item" ng-repeat="item in items | orderBy:'position'">

---

Items是包含键和值的json对象。因此orderBy:items[0]。位置没有意义，因为没有items[0]

当我们在items中执行

项时，它将遍历items的每个键，因此这应该是可行的

orderBy : items[item][0].position

Items是包含键和值的json对象。因此orderBy:items[0]。位置没有意义，因为没有items[0]

当我们在items

中执行

项时，它将遍历items的每个键，因此这应该是可行的

orderBy : items[item][0].position

您应该重新映射数据，以实现所需的输出

模型应该是这样的

[{
  name: string,
  position: number,
  titles: string[]
}]

$scope.items = {
    books: [
        { position: 1 },
        { title: 'Harry Potter' },
        { title: 'Lord of The Rings' }
    ],
    movies: [
        { position: 0 },
        { title: 'Mission Impossible' },
        { title: 'Star Wars' }
    ]
};
$scope.final = [];
_init();
function _init() {       
    $scope.final = [];
    //Iterate the keys
    for (var x in $scope.items) {
        var data = {
            name: x,//store the key in the name
            position: $scope.items[x][0].position,//position
            titles: []
        }
        //iterate every item 
        for (var y of $scope.items[x]) {
            //push only the title items
            if (y.hasOwnProperty("title")) {
                data.titles.push(y.title);
            }
        }
        $scope.final.push(data);
    }
    console.log($scope.final)
}

<div class="item" ng-repeat="item in final | orderBy:'position'">
  {{item.name}}
  <ul>
    <li ng-repeat="title in item.titles">
      {{title}}
    </li>
  </ul>
</div>

要做到这一点，就这样做吧

[{
  name: string,
  position: number,
  titles: string[]
}]

$scope.items = {
    books: [
        { position: 1 },
        { title: 'Harry Potter' },
        { title: 'Lord of The Rings' }
    ],
    movies: [
        { position: 0 },
        { title: 'Mission Impossible' },
        { title: 'Star Wars' }
    ]
};
$scope.final = [];
_init();
function _init() {       
    $scope.final = [];
    //Iterate the keys
    for (var x in $scope.items) {
        var data = {
            name: x,//store the key in the name
            position: $scope.items[x][0].position,//position
            titles: []
        }
        //iterate every item 
        for (var y of $scope.items[x]) {
            //push only the title items
            if (y.hasOwnProperty("title")) {
                data.titles.push(y.title);
            }
        }
        $scope.final.push(data);
    }
    console.log($scope.final)
}

<div class="item" ng-repeat="item in final | orderBy:'position'">
  {{item.name}}
  <ul>
    <li ng-repeat="title in item.titles">
      {{title}}
    </li>
  </ul>
</div>

在视图中应该是这样的

[{
  name: string,
  position: number,
  titles: string[]
}]

$scope.items = {
    books: [
        { position: 1 },
        { title: 'Harry Potter' },
        { title: 'Lord of The Rings' }
    ],
    movies: [
        { position: 0 },
        { title: 'Mission Impossible' },
        { title: 'Star Wars' }
    ]
};
$scope.final = [];
_init();
function _init() {       
    $scope.final = [];
    //Iterate the keys
    for (var x in $scope.items) {
        var data = {
            name: x,//store the key in the name
            position: $scope.items[x][0].position,//position
            titles: []
        }
        //iterate every item 
        for (var y of $scope.items[x]) {
            //push only the title items
            if (y.hasOwnProperty("title")) {
                data.titles.push(y.title);
            }
        }
        $scope.final.push(data);
    }
    console.log($scope.final)
}

<div class="item" ng-repeat="item in final | orderBy:'position'">
  {{item.name}}
  <ul>
    <li ng-repeat="title in item.titles">
      {{title}}
    </li>
  </ul>
</div>


{{item.name}


{{title}}


您应该重新映射数据，以获得所需的输出

模型应该是这样的

[{
  name: string,
  position: number,
  titles: string[]
}]

$scope.items = {
    books: [
        { position: 1 },
        { title: 'Harry Potter' },
        { title: 'Lord of The Rings' }
    ],
    movies: [
        { position: 0 },
        { title: 'Mission Impossible' },
        { title: 'Star Wars' }
    ]
};
$scope.final = [];
_init();
function _init() {       
    $scope.final = [];
    //Iterate the keys
    for (var x in $scope.items) {
        var data = {
            name: x,//store the key in the name
            position: $scope.items[x][0].position,//position
            titles: []
        }
        //iterate every item 
        for (var y of $scope.items[x]) {
            //push only the title items
            if (y.hasOwnProperty("title")) {
                data.titles.push(y.title);
            }
        }
        $scope.final.push(data);
    }
    console.log($scope.final)
}

<div class="item" ng-repeat="item in final | orderBy:'position'">
  {{item.name}}
  <ul>
    <li ng-repeat="title in item.titles">
      {{title}}
    </li>
  </ul>
</div>

要做到这一点，就这样做吧

[{
  name: string,
  position: number,
  titles: string[]
}]

$scope.items = {
    books: [
        { position: 1 },
        { title: 'Harry Potter' },
        { title: 'Lord of The Rings' }
    ],
    movies: [
        { position: 0 },
        { title: 'Mission Impossible' },
        { title: 'Star Wars' }
    ]
};
$scope.final = [];
_init();
function _init() {       
    $scope.final = [];
    //Iterate the keys
    for (var x in $scope.items) {
        var data = {
            name: x,//store the key in the name
            position: $scope.items[x][0].position,//position
            titles: []
        }
        //iterate every item 
        for (var y of $scope.items[x]) {
            //push only the title items
            if (y.hasOwnProperty("title")) {
                data.titles.push(y.title);
            }
        }
        $scope.final.push(data);
    }
    console.log($scope.final)
}

<div class="item" ng-repeat="item in final | orderBy:'position'">
  {{item.name}}
  <ul>
    <li ng-repeat="title in item.titles">
      {{title}}
    </li>
  </ul>
</div>

在视图中应该是这样的

[{
  name: string,
  position: number,
  titles: string[]
}]

$scope.items = {
    books: [
        { position: 1 },
        { title: 'Harry Potter' },
        { title: 'Lord of The Rings' }
    ],
    movies: [
        { position: 0 },
        { title: 'Mission Impossible' },
        { title: 'Star Wars' }
    ]
};
$scope.final = [];
_init();
function _init() {       
    $scope.final = [];
    //Iterate the keys
    for (var x in $scope.items) {
        var data = {
            name: x,//store the key in the name
            position: $scope.items[x][0].position,//position
            titles: []
        }
        //iterate every item 
        for (var y of $scope.items[x]) {
            //push only the title items
            if (y.hasOwnProperty("title")) {
                data.titles.push(y.title);
            }
        }
        $scope.final.push(data);
    }
    console.log($scope.final)
}

<div class="item" ng-repeat="item in final | orderBy:'position'">
  {{item.name}}
  <ul>
    <li ng-repeat="title in item.titles">
      {{title}}
    </li>
  </ul>
</div>


{{item.name}


{{title}}


您无法将
orderBy
应用于对象，因此您需要创建中间
$scope.itemsArray
，并改用它：


angular.module（'app'，[]）.controller（'ctrl'，function（$scope）{
$scope.items={
书籍：[
{位置：1}，
{标题：'哈利波特'}，
{标题：'指环王'}
],
电影：[
{位置：0}，
{标题：'不可能的任务'}，
{标题：《星球大战》}
]
};
$scope.itemsArray=[]；
for（var prop在$scope.items中）{
var val=$scope.items[prop]；
$scope.itemsArray.push（{key:prop，val，sort:val[0].position}）
}    
})


{{item.key}:{{{item.val}
您无法将
orderBy
应用于对象，因此您需要创建中间
$scope.itemsArray
，并改用它：


angular.module（'app'，[]）.controller（'ctrl'，function（$scope）{
$scope.items={
书籍：[
{位置：1}，
{标题：'哈利波特'}，
{标题：'指环王'}
],
电影：[
{位置：0}，
{标题：'不可能的任务'}，
{标题：《星球大战》}
]
};
$scope.itemsArray=[]；
for（var prop在$scope.items中）{
var val=$scope.items[prop]；
$scope.itemsArray.push（{key:prop，val，sort:val[0].position}）
}    
})


{{item.key}:{{{item.val}
如果这是一个标准数组，它就可以工作，但这是一个目标如果你想迭代所有数组，你应该使用ng repeat nested，如果这是一个标准数组，它就可以工作，但如果你想迭代所有数组，你应该使用ng repeat nested，它就是一个目标