Question

我的目的是显示项目列表及其各自的计数和描述。我在表格中获取项目名称和计数。任何人都可以告诉我如何通过映射itemName？

来获取表格中的描述

＆＃13;

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"

})

＆＃13;

<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>

＆＃13;

Answer 1

您的数据是否构成单独的计数和项目？如果以这种方式检索它们，最好在检索后预处理数据，以将计数添加到匹配的data.items数组中。如果您不想预处理数据，我建议您在ng-repeat数组上items，因为您的计数对象很容易被查询。

＆＃13;

<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>

＆＃13;

Answer 2

使用方法

html的

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

的.js

getDescription(key) {
  const foundItem = $scope.data.items.find(item => item.itemName === key);
  return foundItem ? foundItem.itemDescription : '';
}

Answer 3

创建一个新数组并将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>

Answer 4

您必须定义一个函数，它将通过迭代数据项来返回描述。

＆＃13;

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
}
  
})

＆＃13;

<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>

＆＃13;

Angularjs在ng-repeat中迭代

4 个答案: