Question

我有一个指令，当给定一个数组时，它使用Name作为复选框的标签为该项目列表创建复选框。

HTML

<div>
<a style="float:right; margin-bottom: 5px;" ng-click="selectNone()" href="#">Select None</a>
<a style="float:right; margin-bottom: 5px;margin-left: 10px" ng-click="selectAll()" href="#">Select All</a>

<div class="cleared"></div>

<div class="form-input form-list">
    <label ng-repeat="item in valuelist | orderBy:'Name'">
        <input type="checkbox" checklist-model="model" checklist-value="item" /> {{item.Name}}<br />
    </label>
</div>

JS

    'use strict';

growllApp.directive('checkboxlist', [function () {
    return {
        restrict: 'E',
        templateUrl: 'scripts/modules/checkboxlist.template.html',
        controller: 'checkboxlistController',
        scope: {
            model: "=",
            value: "=",
            valuelist: "="
        }
    }
}]);

growllApp.controller('checkboxlistController', ['$scope', '$routeParams', '$location', '$cookieStore', function ($scope, $routeParams, $location, $cookieStore) {
    $scope.selectAll = function () {
        $scope.model = angular.copy($scope.valuelist);
    };

    $scope.selectNone = function () {
        $scope.model = [];
    };
}]);

使用指令

<checkboxlist ng-show="applyToProducts" model="coupon.Products" value="Name" valuelist="productsList"></checkboxlist>

所有这些在大多数情况下都能正常工作。但是，我有一个场景，我传入的数组中包含的对象没有属性＆＃34; Name＆＃34;而是拥有财产＆＃34; Title＆＃34;。

如何在指令中使用我所拥有的属性＆＃34; value＆＃34;对于确定标签的部分。

所以在指令html而不是说{{item.Name}}如何通过传入属性名称在某些情况下是标题来指定{{item.Title}}？

Answer 1

您可以更改＆＃39;值＆＃39;您的指令的属性为＆＃39; @＆＃39; （这意味着该值将作为字符串发送到您的指令。您可以在此article 中阅读更多内容）

scope: {
        model: "=",
        value: "@",
        valuelist: "="
    }

要获取对象的属性，您可以执行以下操作：

  {{item[value]}}

Answer 2

除了建议三元运算符的答案之外，您可以将其简化为

{{ item.Name || item.Title }}

你可以根据需要选择多种替代方案。

然而，我认为一种更强大的方法就像其他人建议的那样做，并说

scope : {
    ...
    key:'@'
    ...
}

其中key是属性的名称及其访问权限

{{ item[key] }}

Answer 3

您可以尝试使用ternary operator：

{{ item.Name ? item.Name : item.Title }}

您可能需要使用custom comparator作为订单。

如何动态访问angularjs指令中的属性？

3 个答案: