Angular редактировать позицию списка

331

15 марта 2017, 19:15

У меня есть массив объектов, который приходит с сервера по гет запросу, нужно сделать 2 кнопки, 1я редактирует выбранную позицию, вторая удаляет. Вот кнопки

<button ng-dblclick="toggle = !toggle" ng-class="{'editing':toggle}"'>e</button>
<button on-click='deleteTask'>x</button>

Вот код скрипта

        //Удалить пункт
    $scope.deleteTask = function(){
        $scope.tasksArr = $scope.tasksArr.filter(function(item){
            return !item.companyName
        })
    }
    //Изменить пункт
    $scope.toggle = false;
        //Изменение данных
    $scope.$watch('tasksArr',function(newVal,oldVal){
        if(newVal!=oldVal){
            //localStorage.setItem('tasksArr',JSON.stringify(newVal))
            $http.post('http://avalon.avalonfaltd.com:3090/companies')
            .then(function (response){
                    $scope.tasksArr = response.data.success;
            })
            .catch(function (response){
               console.error('error', response.status, response.data);
            });
        }
        },true)

Подскажите, пожалуйста, что не так или как правильно это реализовать

Answer 1

Накатал в fiddle простой пример, основанный на примере todo с официального сайта

<div ng-app="todoApp">
<div ng-controller="TodoListController as todoList">
  <span>{{todoList.todos.length}} todos</span>
  <table>
    <tr ng-repeat="todo in todoList.todos">
      <td>
        <span ng-hide='todo.editing'>{{todo.text}}</span>
        <input ng-show='todo.editing' type="text" ng-model="todo.text"  size="20" placeholder="add new todo here">
      </td>
      <td>
        <button ng-hide='todo.editing'  ng-click='todo.editing = true'>edit</button>
        <button ng-show='todo.editing' ng-click='todo.editing=false; todoList.update(todo)'>ok</button>
      </td>
      <td>
        <button ng-click='todoList.destroy(todo)'>delete</button>
      </td>
    </tr>
  </table>
  <form ng-submit="todoList.addTodo()">
    <input type="text" ng-model="todoList.todoText" size="20"
           placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">
  </form>
</div>

angular.module('todoApp', [])
.controller('TodoListController', function($filter) {
var todoList = this;
todoList.todos = [
  {text:'learn AngularJS'},
  {text:'build an AngularJS app'}];
todoList.addTodo = function() {
  todoList.todos.push({text:todoList.todoText});
  todoList.todoText = '';
};
todoList.update = function(todo){
  console.log('пост на сервер: обновить', todo.text)
};
todoList.destroy = function(todo){
  var idx = todoList.todos.indexOf(todo);
  console.log('пост на сервер: удалить', todo.name)
  todoList.todos.splice(idx,1);
};
});

Но это не лучшее решение.

Во-первых там же на офф сайте есть пример Wire up a Backend с использованием сервисов. Там создается полноценная REST модель Projects, объекты которой можно сохранять просто вызвав .save() (poject.name = 'New name'; poject.save() автоматически отправит запрос на сервер)

Во-вторых в этом же примере редактирование реализована через роутинг и отдельной view для этого, что на много лучше на мой взгляд. Inline редактирование лучше реализовать с помощью директив (в ангуляре любые манипуляции с UI лучше реализовывать через них)

На офф сайте все примеры для актуальной версии ангуляра. Он заметно отличается от старых - там уже не используют отдельный инджект для $scope. Вот тут та же страница, но на русском и для более старой версии.