удалить динамически добавленные значения в ng-repeat (angularjs)

0

Прежде всего, счастливое благодарение всем вам!

У меня есть plunker-> http://plnkr.co/edit/N2bs5xqmtsj3MmZKEI25?p=info Пользователь выбирает все три значения, и только после этого кнопка "Добавить" включена для добавления.

После нажатия выбранные записи отображаются ниже, используя ng-repeat. Я также кнопка кнопки удаления для каждой добавляемой строки. Как я могу убедиться, что функция удаления работает в этом случае. ? т.е. если я нажму "удалить", будет удалена только эта конкретная строка.

Во-вторых, если вы заметили во время первого добавления, одна кнопка удаления отображается над первой строкой. как я могу удалить это?

Я также хочу сохранить выбранные файлы в контроллере, чтобы я мог передать эти данные на сервер. Как я могу узнать, какие параметры были выбраны пользователем.

вот плункер code- HTML

<div ng-controller="Controller">
<form name="form" novalidate>
     <input type='file' onchange="angular.element(this).scope().fileNameChanged(this)" ng-model="document" valid-file required>
               <select name="singleSelect" ng-model="activeItem.content" ng-options="foo as foo for foo in contentarray" required>
                   <option ng-if="contentarray.length > 1" value="" selected>Choose</option>
               </select>

               <select name="singleSelect1" ng-model="activeItem.content1" ng-options="foo as foo for foo in content1array" required>
                   <option ng-if="content1array.length > 1" value="" selected>Choose</option>
               </select>
               <button ng-click="addItem()" ng-disabled="disableAdd || (form.$invalid && (!form.$valid && 'invalid' || 'valid'))">Add</button>
</form>

<div ng-repeat="item in items" ng-show="isvisible">
      <a>{{item.name}}</a>
      <a>{{item.content}}</a>
      <a>{{item.content1}}</a>
      <button ng-click="deleteItem()">Delete</button>
</div>
</div>

JS-код

var app = angular.module('Select', []);

app.controller('Controller', function($scope, $timeout) {
/* for adding optional file based selection values selected by the user*/
$scope.isvisible = false;  /* display 1st line  when user clicks on add button*/
$scope.items = [{
}];

$scope.activeItem = {
    name: '',
    content: '',
    content1: ''
}
$scope.fileNameChanged = function (el) {
    $scope.activeItem.name = el.files[0].name
}


$scope.addItem = function () {
    $scope.isvisible = true;
    $scope.items.push($scope.activeItem);
    if ($scope.items.length > 6) {
        $scope.disableAdd = true
    }
    $scope.activeItem = {} /* reset active item*/
    angular.element("input[type='file']").val(null); /* To clear the input type file selected for next selection*/
}




/* for showing select options and enabling add button only when both the options are selected*/
$scope.content = {};
$scope.content1 = {};

$scope.contentarray = ['2', '3'];
$scope.content1array = ['12', '121', '1233', '1211'];

$scope.trigger = function () {
    $timeout(function () {
        $('form.bad select').trigger('change');
    })
}

});
Теги:
validation
angularjs-ng-repeat

1 ответ

1
Лучший ответ

Я имею в виду ваш deleteItem() и delete-button -problem:

Вам нужно будет реализовать свой deleteItem() в вашем контроллере. ng-repeat будет автоматически обновлять список, при удалении элемента из модели ìtems, нет необходимости в angular.element. Это работает из-за двусторонней привязки данных в Angular.

Добавьте идентификатор к своим " ìtems и используйте это, чтобы удалить элемент из модели, например:

$scope.addItem = function() {
    //...
    $scope.activeItem.id = $scope.items.length;
    $scope.items.push($scope.activeItem);
    //...
}

$scope.deleteItem = function(item) {
    $scope.items.splice(item.id, 1);
}

В своем ng-repeat вам нужно определить свою кнопку следующим образом:

<button ng-click="deleteItem(item)">Delete</button>

Другая проблема связана с дополнительным delete -button: Это отображается, потому что вы инициализируете свои модели " ìtems с пустым элементом". Инициализируйте это вместо этого, и кнопка не будет показана:

$scope.items = [];

надеюсь, это поможет

  • 0
    Это сработало блестяще для меня. Спасибо за объяснение тоже.
  • 0
    Могу ли я сохранить все эти значения на стороне контроллера? т.е. я хочу знать, что выбрал пользователь. как я могу получить это?
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню