AngularJSのボタンをクリックしてテキスト領域を削除する方法

AngularJSの上のテキスト領域を削除するボタンを作成しようとしています。私はプログラムを作成してノートを作成していますが、これまではノートを投稿できましたが、ノートを削除することはできません。コードは次のようになります。AngularJSのボタンをクリックしてテキスト領域を削除する方法

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  </script> 
<body> 
<style> 
    #par1{ 
    text-align: left; 
    } 
    .wideInput{ 
    height: 100px; 
    width: 400px; 
    padding-top: 80px; 
    vertical-align: text-top; 
    } 

    .stuff{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    } 


</style> 
<div ng-app="myApp" ng-controller="myCtrl"> 
<p id="par1">Notes <br> 
<textarea class="wideInput" cols="30" rows="10" ng-model="name"></textarea> 
<br> 

<button type="button" ng-click="addNote()" ng-model="button">Submit</button> 
<button type="button" ng-model="delete">Delete</button> 

    <div class="stuff" ng-repeat="note in notes"> 
     <textarea class="wideInput" cols="30" rows="10" ng-model="note" ng- repeat="writing in writings"></textarea><br> 
     <button type="button" ng-click="addNote()" ng-model="button">Submit</button> 
     <button type="button" ng-click="deleteNode(this)" ng- model="button">Delete</button> 
    </div> 
<!--   

    <li class="stuff"> 
     <button type="button" ng-click="addNote()">Submit</button> 
    </li> 
    //--> 






</div> 

<script> 
    angular.module('myApp', []) 
    .controller('myCtrl', function($scope){ 
     $scope.notes=[] 
     $scope.buttons=[] 
     $scope.writings=[{}] 
     $scope.addNote=function(){ 
      $scope.notes.push({}); 
     } 
    }); 
</script> 

</body> 
</html>

まだ画像を投稿する方法がわかりません。どのようにこの問題にアプローチするための任意の提案？

出典

2016-12-21 Anonymous

<div ng-app="myApp" ng-controller="myCtrl"> 
    <p id="par1">Notes <br> 
<textarea class="wideInput" cols="30" rows="10" ng-model="name"></textarea> 
<br> 

<button type="button" ng-click="addNote()" ng-model="button">Submit</button> 
<button type="button" ng-model="delete">Delete</button> 

    <div class="stuff" ng-repeat="note in notes"> <!-- As long as you are not using orderBy --> 
     <textarea class="wideInput" cols="30" rows="10" ng-model="note" ng- repeat="writing in writings"></textarea><br> 
     <button type="button" ng-click="addNote()" ng-model="button">Submit</button> 
     <button type="button" ng-click="deleteNote($index)" ng- model="button">Delete</button> 
    </div> 
<!--   

    <li class="stuff"> 
     <button type="button" ng-click="addNote()">Submit</button> 
    </li> 
    //--> 






</div> 

    <script> 
    angular.module('myApp', []) 
    .controller('myCtrl', function($scope){ 
    $scope.notes=[] 
    $scope.buttons=[] 
    $scope.writings=[{}] 

$scope.deleteNote = function(index){ 
    $scope.notes.splice(index, 1); 
} 
$scope.addNote=function(){ 
$scope.notes.push({ 
}) 

} 

}); 
</script> 

</body> 
</html>

出典

2016-12-21 18:49:16 Melzar

ありがとう、本当に感謝します。 ng-clickで$インデックスがdeleteNode（）メソッドのパラメータとして機能するのはなぜですか？テキスト領域のインデックスを選択する方法を知っていますか？ –

ng-repeatは、Web開発（https://docs.angularjs.org/api/ng/directive/ngRepeatを見てください）で役立ついくつかのヘルパー値を提供します。配列をループしているので、そのアイテムの$インデックスを知っています。その場合、どのアイテムがDOMにバインドされるのかを知っています。この値を関数に渡すだけです。 orderByフィルタを使用していない限り、$ indexの値は正しいでしょう。 – Melzar

しかし、私は配列の5番目の要素にあり、2番目の要素を削除したいとします。 $ index = 4でないでしょうか？ 2番目のテキスト領域の削除ボタンを押した場合、2番目の要素に戻るのはどうでしょうか？ –

AngularJSのボタンをクリックしてテキスト領域を削除する方法

答えて

関連する問題