Question

我正在尝试学习AngularJS（以及Ionic Framework）并且因为我无法让我的页面反映新项目而陷入困境。

我使用ng-repeat显示页面上的项目。

我有一个删除项目按钮。

当我点击删除时，该单个项目将从页面上消失。到目前为止一切都很好。

但是，当我尝试添加/推送新项目时，没有任何反应。如果我在chrome中调试并检查TimeEntries数组，我可以看到项目被添加到数组中，但页面没有更新以显示新项目。

我不明白为什么我的deleteItem工作正常，但testAdd不起作用

以下简化代码.... 在我的HTML中，我有：

<ion-list ng-controller="EntriesCtrl">
    <ion-item ng-repeat="entry in model.TimeEntries">
        <div class="row">
            <div>{{entry.JobCode}}</div>
            <div>{{entry.Description}}</div>
            <div>{{entry.MinutesSpent}}</div>
        </div>

        <ion-option-button ng-click="deleteItem(entry, $index)">
        </ion-option-button>
    </ion-item>
</ion-list>


<a ng-click="testAdd()">Add New</a>

在我的控制器中我有：

$scope.model = {
    TimeEntries: [
        { Id: 1, Date: new Date(), JobCode: 'JobCode.123', Description: "Blah blah blah", TimeSpent: 15 },
        { Id: 2, Date: new Date(), JobCode: 'JobCode.1', Description: "Blah blah", TimeSpent: 25 },
        { Id: 3, Date: new Date(), JobCode: 'JobCode.12', Description: "Blah blah blah", TimeSpent: 45 },
        { Id: 4, Date: new Date(), JobCode: 'JobCode.3', Description: "Blah blah blah", TimeSpent: 115 }
    ]
};

$scope.testAdd = function () {
    $scope.model.TimeEntries.push({ Id: 5, Date: new Date(), JobCode: 'JobCode.1', Description: "Blah blah", TimeSpent: 25 });
}

$scope.deleteItem = function (entry, index) {
    $scope.model.TimeEntries.splice(index, 1);
}

Pyetras＆＃39;解决方案是正确的，但我有一个后续问题。

在我的app.js中，我将页面定义为使用EntriesCtrl

.state('app.timesheetDay', {
        url: "/timesheet-day/{date}",
        views: {
            'menuContent': {
                templateUrl: "templates/timesheet-day.html",
                controller: 'EntriesCtrl'
            }
        }
    })

因为我将该页面定义为使用EntriesCtrl，我认为从该页面调用的任何函数都会自动在正确的范围内？

为什么我在上面的例子中没有在正确的范围内进行testAdd（）射击？

在摆弄它之后看起来如果我删除ng-controller属性然后原始的testAdd工作得很好，所以我想通过在我的状态配置和页面属性中定义它来缩小/打破范围

Answer 1

您的添加按钮超出了控制器的范围，将其移动到控制器元素内部，如下所示：

<ion-list ng-controller="EntriesCtrl">
<ion-item ng-repeat="entry in model.TimeEntries">
    <div class="row">
        <div>{{entry.JobCode}}</div>
        <div>{{entry.Description}}</div>
        <div>{{entry.MinutesSpent}}</div>
    </div>

    <ion-option-button ng-click="deleteItem(entry, $index)">
    </ion-option-button>
</ion-item>
<a ng-click="testAdd()">Add New</a>
</ion-list>

AngularJS ng-repeat列表未使用新数组值进行更新

1 个答案: