Question

我正在制作一个非常简单的自定义指令，它将显示作为2D数组的范围内存在的一列产品详细信息。自定义指令将具有将要传递的属性，必须显示该列的数组。请参阅以下plnkr -

https://plnkr.co/edit/zVIRZ8ADdQB4X8dSFOaJ

从UI我正在使用它 -

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

目前显示阵列的所有数据。但是我只需要显示1列数据，并且该列将由指令属性提及（例如-name，如plnkr中所示）

在链接功能中，我可以使用以下代码获取列名称 -

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

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

可以在angular v1文档中找到模板功能版本的文档：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>

仅显示范围的2D数组的一列数据

1 个答案: