2

在 AngularJS 中，我试图向数组中添加一个新项目。该项目已正确添加，但显示不反映更改。

添加新任务：

 $scope.addNewTask = function() 
 {  
    console.log( "Before: " + $scope.tasks.length );

    $scope.newTask = [
        {
            id:     '3',
            title:  'Get answer'
        }
    ];

    $scope.tasks.push( $scope.newTask[0] );

    console.log( "After: " + $scope.tasks.length ); // one more than before
};

任务数组：

$scope.tasks = [
    {
        id:     '1',
        title:  'Run into problem'
    },
    {
        id:     '2',
        title:  'Ask question'
    }
];

看法：

<ul>
    <li ng-repeat="task in tasks>
        {{ task.id }} {{ task.title }}
    </li>
</ul>

虽然我可以在控制台上看到添加了新项目，但列表并未更新以反映更改。

编辑：不知道它是否有任何区别，但是在单击表单的提交按钮时调用该函数，如下所示：

<form class="newtask-form" ng-submit="addNewTask()">
    <input type="submit" name="submit" value="Add new task" />
</form>
4

2 回答 2

3

所以，我解决了。问题是这样的：在我的代码中，我在 ng-view 之外手动设置了 ng-controller。但是，通过路由器，视图的控制器被设置为同一个控制器。

所以我相信发生的事情是我有两个嵌套的控制器对象，一个是通过表单提交更改的任务，另一个是通过 li 显示的任务。

最终，看起来我需要重组我的应用程序并开始为我的数据使用服务，而不是把它全部塞进我的控制器中（任何关于服务的好的介绍都值得赞赏）。但至少现在我知道问题出在哪里了。

于 2013-06-01T21:23:11.427 回答
1

尝试ng-click在其input本身而不是ng-submit在表单上使用 an。

    <form class="newtask-form">
        <input type="submit" name="submit" 
               ng-click="addNewTask()" value="Add new task" />
    </form>

不确定这是否会有所作为，但这是我唯一能想到的（除了scope.$apply()你已经做过的调用。

于 2013-06-01T14:39:52.007 回答