Question

我正在尝试创建一个按钮，删除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>

我不知道如何发布图片。有关如何解决这个问题的任何建议吗？

Answer 1

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

如何通过单击AngularJS中的按钮删除文本区域

1 个答案: