Печать массива объектов с использованием ng-repeat

Question

У меня есть массив объектов, как показано ниже.

Signatures = [{
    "Name": "Person 1",
    "Status": "New"
}, {
    "Name": "Person 2",
    "Status": "New"
}, {
    "Name": "Person 3",
    "Status": "Completed"
}, {
    "Name": "Person 4",
    "Status": "Cancelled"
}];

Я хочу напечатать список по «Имени» каждого из этих объектов следующим образом на основе статуса.

New : Person 1 , Person 2
Completed : Person 3 
Cancelled : Person 4

Я попытался сделать это с 3 нг-повторов. каждый из которых содержит ng-if для сравнения того, является ли статус новым, завершенным или отмененным. Но я ищу лучшее решение. Заранее благодарю за любую помощь

Вот JSfiddle http://jsfiddle.net/HB7LU/21355/

javascript angularjs ng-repeat

-1

Malik 18 Дек 2015 в 15:58

Answer 1

Изменить ваш дом, чтобы использовать фильтр

<div ng-controller="MyCtrl">
<div>
New 
  <span ng-repeat="signer in Signatures | filter : {Status : 'New'}">
      <span>
                  <b>{{signer.Name}}</b>
      </span>
  </span>
</div>

<div>
Completed 
  <span ng-repeat="signer in Signatures | filter : {Status : 'Completed'}">
      <span>
                  <b>{{signer.Name}}</b>
      </span>
  </span>
</div>

<div>
Cancelled 
  <span ng-repeat="signer in Signatures | filter : {Status : 'Cancelled'}">
      <span>
                  <b>{{signer.Name}}</b>
      </span>
  </span>
</div>

</div>

Это будет работать, как ожидалось.

см. jsfiddle

4

Vivek 18 Дек 2015 в 13:18

Answer 2

Поскольку angular-1.0.1.js не поддерживается ng-if. Вы можете использовать ng-hide или ng-show.

AngularJS сначала добавил директиву ng-if в 1.1.5. Пожалуйста, обновите угловую версию.

<div ng-controller="TestCtrl">

    New: <span ng-repeat="signer in Signatures" ng-if="signer.Status=='New'">
      <b>{{signer.Name}}</b>
    </span>
    </br>
    Completed: <span ng-repeat="signer in Signatures" ng-if="signer.Status=='Completed'">
      <b>{{signer.Name}}</b>
     </span>
     </br>
    Cancelled: <span ng-repeat="signer in Signatures" ng-if="signer.Status=='Cancelled'">
          <b>{{signer.Name}}</b>
     </span>


 <div>

Это будет работать, как ожидалось.

Пример кода.

1

ozgur 18 Дек 2015 в 14:44

Answer 3

Так как angular-1.0.1.js не поддерживается ng-if, вы можете пойти другим альтернативным методом

angular.foreach(Signatures,function(value,key){
      if(value.Status=='New') {
           Signatures.pop(key);
      }
});

0

user5621153user5621153 18 Дек 2015 в 13:10

Answer 4

Просто попробуйте этот код. Это работает:

<div ng-controller="MyCtrl">
<span>New: </span>
<span ng-repeat="signer in Signatures|filter: { Status: 'New' } ">
    <span ng-if="signer.Status=='New'">
        <b>{{signer.Name}}</b>
    </span>
</span>
<br />
<span>Completed: </span>
<span ng-repeat="signer in Signatures|filter: { Status: 'Completed' } ">
    <span ng-if="signer.Status=='New'">
        <b>{{signer.Name}}</b>
    </span>
</span>
<br />
<span>Cancelled: </span>
<span ng-repeat="signer in Signatures|filter: { Status: 'Cancelled' } ">
    <span ng-if="signer.Status=='New'">
        <b>{{signer.Name}}</b>
    </span>
</span>

1

Hardik Mandankaa 18 Дек 2015 в 13:24

Печать массива объектов с использованием ng-repeat

4 ответа

Похожие вопросы

Новые вопросы

javascript