Как обновить значения ng-repeat в угловых js?

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

Если я хочу удалить или скопировать, я могу сделать это, сделано? Но если я нажму на редактирование, появится одно всплывающее окно. Я хочу изменить значения, которые обновляемые значения должны обновляться в массиве.

Как я могу это сделать?

<!doctype html> 
<html> 
<head> 
<title>Angular app</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"> 
    </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<style type="text/css"> 
    .listv{ 
    margin-bottom: 30px; 
    } 
    .editpopup{ 
    width: 250px; 
    height: 250px; 
    border: 1px solid black; 
    display: none; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    right: 0px; 

    background-color:gray; 
    } 
    .editpopup-true{ 
    display: block; 
    } 
    .editpopup-false{ 
    display: none; 
    } 
    </style> 
</head> 
<body ng-app="myApp"> 
    <div ng-controller="myCon"> 
    <div ng-repeat="s in items" class="listv"> 
     <span>{{s.id}}</span> 
     <span>{{s.pname}}</span> 
     <button ng-click="removeStudent($index)">remove</button> 
     <button ng-click="copyrow($index)">copy</button> 
     <button ng-click="editrow($index)">edit</button> 
    </div></br> 

    <div class="editpopup editpopup-{{istrue}} "> 
     <p>edit id:<input type="text" ng-model="editedid"></p> 
     <p>edit pname:<input type="text" ng-model="editedname"></p> 
     <button ng-click="save($index)">save</button> 
     <button ng-click="closepopup()">cancel</button> 
    </div> 

    </div>

 var myApp=angular.module('myApp',[]); 
     myApp.controller('myCon',function($scope){ 
     $scope.items=[{id:1,pname:'box1'},{id:2,pname:'box2'}, {id:3,pname:'box3'}]; 

    $scope.removeStudent=function($index){ 
     $scope.items.splice($index,1); 
    } 
    $scope.copyrow=function($index){ 

    $scope.len=$scope.items.length; 
    $scope.ids=$scope.items[$index].id; 
    $scope.pnames=$scope.items[$index].pname 

    $scope.items.push({ 
      id:$scope.len+1, 
      pname:$scope.pnames 
     }); 
    } 
    $scope.editrow=function($index){ 
    $scope.istrue=true; 
    $scope.editedid=$scope.items[$index].id; 
    $scope.editedname=$scope.items[$index].pname; 
    } 
    $scope.closepopup=function(){ 
    $scope.istrue=false; 

    } 
    $scope.save=function($index){ 
    $scope.istrue=false; 
    $scope.s.name=$scope.editedname; 
    } 
});

здесь jsfiddle

источник

2015-02-03 Dileep

Самый простой способ заключается в использовании angular.copy создать клон объекта при редактировании щелкают, а затем, когда спасбросок щелкните копию данных в элемент в массиве.

Первый initilize $scope.editedItem

$scope.editedItem = {};

Для editrow мы сохраняем редактируемого индекс в $ индекса, а затем клонировать данные в $scope.editedItem.

$scope.editrow = function($index){ 
    $scope.istrue = true; 
    $scope.$index = $index; 
    angular.copy($scope.items[$index], $scope.editedItem); 
}

Тогда в save мы клонировать данные обратно в объект в массиве:

$scope.save = function(){ 
    $scope.istrue = false; 
    angular.copy($scope.editedItem, $scope.items[$scope.$index]) 
}

мнение необходимо обновить вместо этого использовать editedItem:

<div class="editpopup editpopup-{{istrue}} "> 
    <p>edit id:<input type="text" ng-model="editedItem.id"></p> 
    <p>edit pname:<input type="text" ng-model="editedItem.pname"></p> 
    <button ng-click="save()">save</button> 
    <button ng-click="closepopup()">cancel</button> 
</div>

JsFiddle

источник

2015-02-03 12:02:07

Он работал хорошо для меня, Есть ли другой возможный путь? Или, может быть, в Angular2? Спасибо – M98

Во-первых, сохраните старое значение l икэ это:

$scope.editrow=function($index){ 
    $scope.istrue=true; 
    $scope.oldValue = $scope.items[$index].id; // save the old id 
    $scope.editedid=$scope.items[$index].id; 
    $scope.editedname=$scope.items[$index].pname; 
};

Затем, когда вы сохраняете, просто найти правильный объект с помощью старого значения и присвоить новые значения, как это:

$scope.save=function($index){ 
    $scope.istrue=false; 
    $scope.items.forEach(function (item) { 
     if(item.id == $scope.oldValue){ 
      item.id = $scope.editedid; 
      item.pname = $scope.editedname; 
     } 
    }); 
};

JsFiddle

источник

2015-02-03 12:06:02

Я это такой же выпуск. здесь было мое исправление

Мой исходный код, который не обновлялся объект

<div class="info" ng-repeat="email in vm.contactData.emails.other"> 
     <input type="text" ng-model="email" /> 
</div>

на материалы $ индекс, чтобы правильно привязать его

<div class="info" ng-repeat="email in vm.contactData.emails.other"> 
     <input type="text" ng-model="vm.contactData.emails.other[$index]" /> 
</div>

Это связывание создает проблема повторного рисования, поскольку он не знает, ссылается ли обновленный элемент в массиве на тот же элемент, который был в этом месте раньше.Чтобы исправить это, мне пришлось внести небольшое изменение в форматирование массива.

['[email protected]','[email protected]']

становится

[ 
    {'email': '[email protected]'}, 
    {'email': '[email protected]'} 
]

<div class="info" ng-repeat="email in vm.contactData.emails.other"> 
    <input type="text" ng-model="vm.contactData.emails.other[$index]" /> 
</div>

становится

<div class="info" ng-repeat="email in vm.contactData.emails.other"> 
     <input type="text" ng-model="vm.contactData.emails.other[$index].email" /> 
</div>

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

источник

2015-12-10 23:26:14

Это сработало для меня !!!! Но мне не нужно было передавать $ index часть в ng-модели –

Сначала объявите переменную $scope.getIndex=0; и получите индекс из массива элементов при нажатии кнопки сохранения. Затем присвойте $index этой переменной.

Теперь вы можете получить items[$scope.getIndex] в любом месте контроллера. И поможет вам обновить элементы массива:

$scope.getIndex=0; 
$scope.editrow=function($index){ 
    $scope.getIndex=$index; 
    $scope.istrue=true; 
    $scope.editedid=$scope.items[$index].id; 
    $scope.editedname=$scope.items[$index].pname; 
} 

$scope.save=function($index){ 
    $scope.istrue=false; 
    $scope.items[$scope.getIndex].id=$scope.editedid; 
    $scope.items[$scope.getIndex].pname=$scope.editedname; 
}[enter link description here][1]

JSFiddle

источник

2017-04-20 12:35:58

Как обновить значения ng-repeat в угловых js?

ответ

Смежные вопросы