Question

我是AngularJS的新手，我正在试图弄清楚如何添加和删除我创建的设置中的注释。我尝试了很多不同的东西，但我无法弄清楚如何让它发挥作用。我已经清理了我的代码，所以应该更容易理解。请查看我的代码的jsfiddle version或摘要：

'use strict'

var app = angular.module('plunker', ['ui.sortable']);

app.controller('MainCtrl', function($scope) {

  var i;
  $scope.itemsList = {
    items1: [],
    items2: []
  };

  for (i = 0; i <= 5; i += 1) {
    $scope.itemsList.items1.push({
      'Id': i,
      'Label': 'Item ' + i
    });
  }
  $scope.sortableOptions = {
    containment: '#sortable-container',
    accept: function(sourceItemHandleScope, destSortableScope) {
      return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;
    }
  };

});

.as-sortable-item,
.as-sortable-placeholder {} #sortable-container {} .touch-mover {
  float: right;
  padding: 3px;
  margin-top: 5px;
}

<html ng-app="plunker">

<head>

  <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
  <script src="https://rawgithub.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div id="sortable-container">
    <div class="form-actions">
      <div class="input-append">
        <form>
          <input class="span3" size="16" type="text" placeholder="Add a note">
          <button class="btn btn-success" type="button" ng-disabled="" ng-click="">
            Add Note
          </button>
        </form>
      </div>
    </div>
    <div class="sortable-row" as-sortable="sortableOptions" ng-model="itemsList.items1">
      <div ng-repeat="item in itemsList.items1" class="simpel-fighter-input" as-sortable-item>
        <input class="category-form textboxid" type="text" name="input" ng-model="item.Label" placeholder="Deltager1">
        <div as-sortable-item-handle class="touch-mover">MOVE ME</div>
        <a ng-click="" href>
          <div class="touch-mover">DELETE</div>
        </a>
        <input class="category-form textboxid" style="float:right" type="text" name="input" ng-model="item.Label2" placeholder="Deltager2">
      </div>
    </div>

  </div>
</body>

</html>

Answer 1

对于添加一个注释，只需插入控制器MainCtrl这个函数：

$scope.addNote = function() {
    $scope.itemsList.items1.push({"Id" :  $scope.itemsList.items1.length, "Label": "Item " + $scope.itemsList.items1.length})
}

并编辑表单（将ng-model添加到输入和ng-click功能到按钮），如：

<input class="span3" size="16" type="text" ng-model="noteText" placeholder="Add a note">
<button class="btn btn-success" type="button" ng-disabled="" ng-click="addNote()">
   Add Note
</button>

删除在您的控制器中使用

$scope.deleteNote = function(index) {
    $scope.itemsList.items1.splice(index,1)
}

并将此函数附加到标签“DELETE”，如

ng-click="deleteNote($index)"

我希望这会有所帮助。

添加＆amp;删除AngularJS中的注释

1 个答案: