列表中显示没有得到使用NG-重复更新

问题描述：

<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-重复更新

这是模板代码，我更新列表使用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事件通过添加任务进行更新。我有一个数组，当给定输入时更新。当我检查控制台时，我的数组正在更新，但不显示更新。

答

很少有失误

（我），不要混淆使用jQuery的角度使用ng-click指令代替

（二）如果你正在使用$范围变量不使用控制器的语法。要么采取一种方法。

（iii）使用ng-model为您的输入并将其添加到您的阵列。

DEMO

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}); 
 
    } 
 

 
}])

<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>

好。我做了改变，包括ng模型和相应的代码，但保持jquery部分的原样。它不起作用。你能说出原因吗？你的解决方案工作。谢谢，但我想知道上面提到的原因。 –

@ManasaN。正如我之前解释过的，在这里不需要jquery。检查演示 – Sajeetharan

答

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

HTML

<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>

function myController($scope){ 
    $scope.tasks=[]; 
    $scope.task = "" 
    var addButton=document.getElementById("addButton"); 
    var delButton=document.getElementById("delButton"); 
    $scope.tasks.length=0; 
    $scope.addTask=function(){ 
        console.log($scope.task) 
      $scope.tasks.push({taskname:$scope.task}); 
      $scope.task = "" 
     } 

}

我想听到这里的意见，而不是-1，据我认为我的解决方案工作正常。 –

列表中显示没有得到使用NG-重复更新

相关推荐