是否可以将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>

但图标从未显示。我尝试了各种各样的东西，要么让图标显示每个列表项，要么不显示。

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

编辑

我很抱歉提供了部分信息。

这是我创建列表的方法

<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的值相匹配)

因此，如果你想在视图中显示一个服务值，你必须把它放在控制器的$作用域中。(如果你想实时绑定这些数据，你应该在控制器中使用watch表达式，观察服务值)

Matthew Berg的答案(关于将服务本身绑定到作用域)是更好的性能(不需要花费资源来复制值)-但这似乎已经是你正在做的，参见我下面的编辑。

---

问题后编辑编辑:

似乎你的问题更简单:你的ng-repeat为每个item in items运行，但在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>