AngularJS、空の要素を押す

非常に角度のある新しいIm。AngularJS、空の要素を押す

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body ng-app="myApp" ng-controller="todoCtrl"> 

<h2>todo</h2> 

<form ng-submit="todoAdd(item)"> 
    <input type="text" ng-model="todoInput" size="50" placeholder="Add New"> 
    <input type="submit" value="Add New"> 
</form> 

<br> 

<div ng-repeat="x in todoList"> 
    <span ng-bind="x.todoText"></span><button id="#edit" ng-click="edit(item)">edit</button><button ng-click="remove(item)">delete</button> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) { 
    $scope.todoList = [{}]; 

    $scope.todoAdd = function(item) { 
     $scope.todoList.push({todoText:$scope.todoInput); 
     $scope.todoInput = ""; 
    }; 

    $scope.remove = function(item) { 
     var index = $scope.todoList.indexOf(item); 
     $scope.todoList.splice(index, 1); 
    }; 
    $scope.edit = function(item) { 
     //function 
    }; 
}); 
</script> 

</body> 
</html>

し、また誰かがにtodoTextをプッシュする編集をクリックした後に私を助けるためにすることができます：何だ、私は約気紛れすることは、（起動時に）空のように見えても、コードを次の空のボタンを示していること（編集/削除）ということです追加するキャプションを入力して変更して保存しますか？それを変更した後、再びaddNewに変更しますか？

は、それはあなたの空の行を表示しないでしょうその後

$scope.todoList = [];

にライン

$scope.todoList = [{}];

を交換し、あなたに

出典

2016-10-20 Martin Fric

Angular2またはAngularJSをお尋ねしますか？ AngularJSコードのように見えますが、** angularjs **タグを使用し、あなたの質問にAngular2と書いています... – Mistalis

大変ありがとうございました。

//Full code. 

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body ng-app="myApp" ng-controller="todoCtrl"> 

<h2>todo</h2> 

<form> 
    <input type="text" ng-model="todoInput" size="50" placeholder="Add New"> 
    <input type="button" value="{{actionName}}" ng-click="todoAdd()" /> 
</form> 

<br> 

<div ng-repeat="x in todoList"> 
    <span>{{x.todoText}}</span><button id="#edit" ng-click="edit(x)">edit</button><button ng-click="remove(item)">delete</button> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) { 
    $scope.todoList = []; 
    $scope.actionName = 'Add'; 

    $scope.todoAdd = function() { 
    if($scope.actionName === 'Add'){ 
     $scope.todoList.push({todoText:$scope.todoInput}); 
     $scope.todoInput = ""; 
    } else { 
     var index = $scope.todoList.indexOf($scope.temp); 
     console.log('index: ' + index); 
     $scope.todoList.splice(index, 1, {todoText:$scope.todoInput}); 
     $scope.actionName = 'Add'; 
    } 
    }; 

    $scope.remove = function(item) { 
     var index = $scope.todoList.indexOf(item); 
     $scope.todoList.splice(index, 1); 
    }; 
    $scope.edit = function(item) { 
     $scope.todoInput=item.todoText; 
     $scope.temp = item; 
     $scope.actionName = 'Save'; 
    }; 
}); 
</script> 

</body> 
</html>

出典

2016-10-20 08:00:20

wow。すばらしいです。その編集はどうですか？あなたは私にヒントをお願いできますか？ –

編集機能で何をしたいですか？ –

「TODO TASK」の内容を変更するだけです –

AngularJS、空の要素を押す

答えて

関連する問題