Angularjs, повторяющийся в ng-repeat - PullRequest
Новая
       3

Angularjs, повторяющийся в ng-repeat

0 голосов
/ 22 мая 2018

Моя цель - отобразить список предметов вместе с их соответствующим количеством и описанием. Я получаю название предмета и считаю в таблице.Может кто-нибудь сказать мне, как получить описание в таблице путем сопоставления itemName? 

var c = angular.module('myApp', []);
c.controller("myCtrl", function($scope) {
  $scope.data = {
    count: {
      "Item 1": 10,
      "Item 2": 20
    },
    items: [{
      "itemDescription": "Item Description",
      "itemName": "Item 1",
    }, {
      "itemDescription": "Item Description",
      "itemName": "Item 2",
    }]
  }

  $scope.name = "Demo"

})
<html>

<head>
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <h1>Hello Plunker!</h1>
  <table border="2">
    <tr>
      <td>Name</td>
      <td>Description</td>
      <td>Count</td>
    </tr>
    <tr ng-repeat="(key,value) in data.count">
      <td>{{key}}</td>
      <td></td>
      <td>{{value}}</td>
    </tr>
  </table>
</body>

</html>

Ответы [ 4 ]

0 голосов
/ 22 мая 2018

Создайте новый массив и поместите в него значения из count.Тогда ngRepeat этот новый массив 

var c = angular.module('myApp', []);
c.controller("myCtrl", function($scope) {
  $scope.data = {
    count: {
      "Item 1": 10,
      "Item 2": 20
    },
    items: [{
      "itemDescription": "Item Description",
      "itemName": "Item 1",
    }, {
      "itemDescription": "Item Description",
      "itemName": "Item 2",
    }]
  }

  var getCountsKeys = Object.values($scope.data.count);
  $scope.newArray = $scope.data.items.map(function(elem, index) {
    elem.itemVal = getCountsKeys[index]
    return elem;

  })

  $scope.name = "Demo"

})
<html>

<head>
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <h1>Hello Plunker!</h1>
  <table border="2">
    <tr>
      <td>Name</td>
      <td>Description</td>
      <td>Count</td>
    </tr>
    <tr ng-repeat="nw in newArray">
      <td>{{nw.itemName}}</td>
      <td>{{nw.itemDescription}}</td>
      <td>{{nw.itemVal}}</td>
    </tr>
  </table>
</body>

</html>
0 голосов
/ 22 мая 2018

Вы должны определить функцию, которая будет возвращать описание, просматривая элементы данных. 

var c = angular.module('myApp',[]);
c.controller("myCtrl",function($scope){
$scope.data={
    count: {
                "Item 1": 10,
                "Item 2" : 20,
                "Item 4": 30
            },
    items : [{
           "itemDescription": "Description 1",
            "itemName": "Item 1",
    },{
           "itemDescription": "Description 2",
            "itemName": "Item 2",
    },{
           "itemDescription": "Description 3",
            "itemName": "Item 3",
    }]
}
  
  $scope.name = "Demo";

$scope.getDescription = (item) => {
    const desc = $scope.data.items.find(i => i.itemName === item);
    return desc && desc.itemDescription // for exception handling
}
  
})
<html>

  <head>
    <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app= "myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <table border="2">
      <tr>
        <td>Name</td>
        <td>Description</td>
        <td>Count</td>
      </tr>
      <tr ng-repeat="(key,value) in data.count">
        <td>{{key}}</td>
        <td>{{getDescription(key)}}</td>
        <td>{{value}}</td>
      </tr>
    </table>
  </body>

</html>
0 голосов
/ 22 мая 2018

Существует ли причина, по которой ваши данные структурированы как отдельные элементы и элементы?Если вы извлекаете их таким образом, может быть лучше предварительно обработать данные после получения, чтобы добавить счетчики в соответствующий им массив data.items.Если вы не хотите предварительно обрабатывать данные, я бы посоветовал вам ng-repeat в вашем массиве items, так как ваш объект count легко запрашивается. 

<html>

  <head>
    <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app= "myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <table border="2">
      <tr>
        <td>Name</td>
        <td>Description</td>
        <td>Count</td>
      </tr>
      <tr ng-repeat="item in data.items">
        <td>{{item.itemName}}</td>
        <td>{{item.itemDescription}}</td>
        <td>{{data.count[item.itemName]}}</td>
      </tr>
    </table>
  </body>

</html>
0 голосов
/ 22 мая 2018

Используйте метод

.html 

<td>
  {{getDescription(key)}}
</td>

.js 

getDescription(key) {
  const foundItem = $scope.data.items.find(item => item.itemName === key);
  return foundItem ? foundItem.itemDescription : '';
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...