是否可以将 ng-if 与服务值一起使用？

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>

但是一直没有显示图标。尝试各种方法，我要么为每个列表项显示图标，要么 none.

如何解决这个问题，并只在需要的地方显示图标。

编辑

对不起，部分信息。

这就是我创建列表的方式

<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 的回答（关于将服务本身绑定到范围）在性能方面更好（无需花费资源来复制值）- 但这似乎已经是您正在做的事情，请参阅我的编辑下面。

问题编辑后编辑：

看来你的问题更简单：你的 ng-repeat 运行每个 item in items，但在 ng-if 你引用 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 与服务值一起使用？

Is it possible to use ng-if with a service value?

javascript

angularjs

angular-material