Question

<div class=container ng-controller="myController as m">
<label> Enter your task : </label>
<input type="text" id="textBox" />
<hr>
<input type="button" value="Add task to list" id="addButton" />
<input type="button" value="Delete task" id="deleteButton" />
<hr>
<h3>Tasks</h3>
<ul>
    <li ng-repeat="task in m.tasks"> {{task.taskname}} </li>
</ul>

这是我使用ng-repeat

更新列表的模板代码

var myApp = angular.module('myApp', [])
myApp.controller('myController', ['$scope', '$log', function($scope, $log) {
    $scope.tasks = [];
    var addButton = document.getElementById("addButton");
    var delButton = document.getElementById("delButton");
    $scope.tasks.length = 0;
    addButton.addEventListener("click", function(event) {
        debugger;
        if (document.getElementById("textBox").value.length > 0) {
            $scope.addTask(document.getElementById("textBox").value);
        }
    })
    $scope.addTask = function(item) {
        $scope.tasks.push({
            taskname: item
        });
    }
}])

从文本框输入和按钮显示的onClick事件，通过添加任务进行更新。我有一个数组，在给出输入时更新。当我检查控制台时，我的阵列正在更新，但显示不会更新。

Answer 1

错误很少

（i）不要将jquery与角度使用 ng-click 指令混为一谈

（ii）如果您使用$ scope变量，请不要使用控制器作为语法。要么采用一种方法。

（iii）使用 ng-model 作为输入，并将其添加到您的数组中。

<强>样本

＆＃13;

var myApp =angular.module('myApp',[])
myApp.controller('myController',['$scope','$log',function($scope,$log)
{
    $scope.task ='';
    $scope.tasks=[];     
    $scope.addTask=function(item)
     {
         $scope.tasks.push({taskname:item});
     }

}])

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" class=container ng-controller="myController">
          <label> Enter your task : </label>
          <input type="text" ng-model="task" id="textBox"/>
            <hr>

            <input type="button" ng-click="addTask(task)"  value="Add task to list" id="addButton" />
            <input type="button" value="Delete task" id="deleteButton"/>
            <hr>
            <h3>Tasks</h3>
            <ul>
                <li ng-repeat="task in tasks"> 
                    {{task.taskname}} 
                </li>
            </ul>

        </div>

＆＃13;

Answer 2

请找到以下代码更改，我在这里没有看到任何删除按钮的使用，它应该是每个项目可用。

HTML

int someHash(string someValue)
{
    return crc32(someValue) + 10 - 5 * 20;
}

JS

 <div ng-app>
 <div class=container ng-controller="myController">
          <label> Enter your task : </label>
          <input type="text" id="textBox" ng-model="task"/>
            <hr>

            <input type="button" value="Add task to list" id="addButton" ng-click="addTask()"/>
            <input type="button" value="Delete task" id="deleteButton"/>
            <hr>
            <h3>Tasks</h3>
            <ul>
                <li ng-repeat="task in tasks"> 
                    {{task.taskname}} 
                </li>
            </ul>

        </div>
       </div>

显示中的列表未使用ng-repeat更新

2 个答案: