仅显示范围二维数组的一列数据

Question

我正在制作一个非常简单的自定义指令，它将显示范围中存在的一列产品详细信息，作为二维数组。自定义指令将具有一个属性，该属性将通过，必须显示数组的哪一列。请看下面的plnkr--

https://plnkr.co/edit/zVIRZ8ADdQB4X8dSFOaJ

来自 UI 我正在使用这个--

<show-products type="name"></show-products>

当前正在显示数组的所有数据。但我只需要显示 1 列数据，该列将由指令属性提及（例如 -name as in plnkr）

在 link 函数中，我可以使用以下代码获取列名-

link: function postlink(scope, element, attr) {
      console.log("...type..." + attr["type"]); // prints name
    }

但是如何将该字段名称传递给模板？

template: '<div ng-repeat="x in products">{{x}}</div>' // i need to print only name column here

Answer 1

您也可以获得模板函数的那些属性，只需创建一个函数而不是字符串并将您的属性类型传递给产品类型变量。

模板函数版本的文档可以在angularv1文档中找到：https://docs.angularjs.org/guide/directive

有关更多信息，请参阅下面的代码段。

<html ng-app="app">

<head>
  <title>Directives</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.js"></script>
  <script>
    angular.module("app", []);

    angular.module("app")
      .controller("ctrl", ctrl)
      .directive("showProducts", showProducts);

    function ctrl($scope) {
      $scope.products = [{
        name: "Apples",
        category: "Fruit",
        price: 1.20,
        expiry: 10
      }, {
        name: "Bananas",
        category: "Fruit",
        price: 2.42,
        expiry: 7
      }, {
        name: "Pears",
        category: "Fruit",
        price: 2.02,
        expiry: 6
      }];
    };


    function showProducts() {
      return {
        template: (child, attributes) => {
          return `<div ng-repeat="x in products">{{x["${attributes["type"]}"]}}</div>`
        }
      };

    };
  </script>
</head>

<body>
  <div class="panel panel-default">
    <div class="panel-body" ng-controller="ctrl">
      <show-products type="name"></show-products>
    </div>
  </div>
</body>

</html>

仅显示范围二维数组的一列数据

show only one column of data of 2D array of scope

javascript

angularjs

angularjs-directive