列表中顯示沒有得到使用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事件通過添加任務進行更新。我有一個數組，當給定輸入時更新。當我檢查控制檯時，我的數組正在更新，但不顯示更新。

來源

2017-08-27 Manasa N.

很少有失誤

（我），不要混淆使用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>

來源

2017-08-27 07:10:36 Sajeetharan

好。我做了改變，包括ng模型和相應的代碼，但保持jquery部分的原樣。它不起作用。你能說出原因嗎？你的解決方案工作。謝謝，但我想知道上面提到的原因。 –

@ManasaN。正如我之前解釋過的，在這裏不需要jquery。檢查演示 – Sajeetharan

-1

請找到下面的代碼修改，我沒有看到這裏的任何使用刪除按鈕，它應該是每個項目可用。

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 = "" 
     } 

}

來源

2017-08-27 07:23:52

我想聽到這裏的意見，而不是-1，據我認爲我的解決方案工作正常。 –

列表中顯示沒有得到使用NG-重複更新

回答

相關問題