Question

我有以下服务，其中包含一些随机数据

.service('dataSrvc', [function() {
    var accountData = {
        accounts: [
            {
                'id': 1,
                'title': 'Account A',
                'selected': true
            },
...

在列表中显示此数据时，我想添加一个图标，如果我们说这个项目的ID等于1。

我尝试使用ng-if

<md-icon aria-label="Duplicates Window" md-font-set="material-icons" ng-if="account.id==1">panorama_fish_eye</md-icon>

但是图标从未显示过。尝试各种各样的事情，我要么为每个列表项显示图标，要么不显示。

如何解决此问题，并仅在需要时显示图标。

修改

我很抱歉部分信息。

这就是我创建列表的方式

<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
                md-component-id="left"
                md-is-locked-open="$mdMedia('gt-sm')" flex>
        <md-list ng-controller="listCtrl" class="listControls">

            <md-subheader class="md-no-sticky">Possible Duplicate Accounts</md-subheader>
            <md-list-item ng-repeat="item in items">
                <md-checkbox ng-checked="item.selected" ng-click="toggle(item)"></md-checkbox>
                <p>{{item.title}}</p>
                <md-icon class="md-secondary" ng-click="doSecondaryAction(item.title, $event)" aria-label="Duplicates Window" md-font-set="material-icons">account_circle</md-icon>
                <div flex>
                <md-icon aria-label="Duplicates Window" md-font-set="material-icons" ng-if="account.id==1">panorama_fish_eye</md-icon>
                </div>
            </md-list-item>
        </md-list>
    </md-sidenav>

这是我的控制器

.controller('listCtrl', ['$scope', 'dataSrvc', '$mdDialog', function($scope, dataSrvc, $mdDialog) {
    $scope.items = dataSrvc.accounts;

    $scope.exists = function(item) {
        return $scope.items.indexOf(item) > -1;
    };

    $scope.toggle = function(item) {
        item.selected = !item.selected;
    };

    $scope.doSecondaryAction = function(item, event) {
        $mdDialog.show(
            $mdDialog.alert()
                .title('Data Preview')
                .content('Data for ' + item)
                .ariaLabel('Duplicates Window')
            .ok('Done')
            .targetEvent(event)
        );
    };
}])

Answer 1

在视图中，您只能引用控制器范围的值。（即当您编写ng-if="account.id===1"时，它将与$scope.account）

的值进行匹配

因此，如果要在视图中显示服务值，则必须将其放在控制器内的$ scope中。（如果您希望实时绑定此数据，则应在控制器中使用监视表达式，并观察服务值）

Matthew Berg的答案（关于将服务本身绑定到范围）的性能更好（不需要花费资源来复制值） - 但这似乎已经是你正在做的事情，请参阅下面的编辑。

编辑问题后编辑：

看起来你的问题更简单了：你的每次item in items运行ng-repeat，但在ng中 - 如果你引用account（这是同一个东西的名字）服务，但不在ng-repeat内！）

只需将ng-if更改为：

ng-if="item.id==1"

Answer 2

首先在你的控制器中将服务绑定到$ scope：

function($scope, dataSrvc){
    $scope.dataSrvc = dataSrvc
}

然后在dom中提到：

<md-icon aria-label="Duplicates Window" md-font-set="material-icons" ng-if="dataSrvc.account.id==1">panorama_fish_eye</md-icon>

是否可以使用ng-if和服务价值？

2 个答案: