Làm thế nào để cập nhật giá trị ng-lặp trong js góc?

Tôi mới đến js góc, tôi có một mảng tôi đang lặp nó qua chỉ thị ng-repeat và tôi đã viết mã để sao chép, xóa và chỉnh sửa các giá trị trong mảng.Làm thế nào để cập nhật giá trị ng-lặp trong js góc?

Nếu tôi muốn xóa hoặc sao chép, tôi có thể thực hiện việc này? Nhưng nếu tôi nhấp vào chỉnh sửa một hộp bật lên sẽ xuất hiện ở đó, tôi muốn chỉnh sửa các giá trị mà các giá trị được cập nhật sẽ cập nhật trong mảng.

Làm cách nào để hoàn thành công việc?

<!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; 
    } 
});

đây là jsfiddle

Nguồn

2015-02-03 Dileep

Cách đơn giản nhất là sử dụng angular.copy để tạo ra một bản sao của đối tượng khi chỉnh sửa được nhấp và sau đó khi tiết kiệm là đã nhấp vào sao chép dữ liệu vào mục trong mảng.

Đầu tiên initilize $scope.editedItem

$scope.editedItem = {};

Đối editrow chúng tôi lưu trữ các chỉ số hiện chỉnh sửa trong $ index và sau đó sao chép dữ liệu vào $scope.editedItem.

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

Sau đó, trong save chúng tôi sao chép dữ liệu trở lại vào đối tượng trong mảng:

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

Quan điểm cần phải được cập nhật để sử dụng thay thế 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

Nguồn

2015-02-03 12:02:07

Nó làm việc tốt cho tôi, Có cách nào khác có thể? Hoặc có thể trong Angular2? Cảm ơn bạn – M98

Trước tiên, hãy lưu giá trị cũ l ike này:

$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; 
};

Sau đó, khi bạn lưu, chỉ cần tìm các đối tượng đúng với sự giúp đỡ của các giá trị cũ và gán giá trị mới như thế này:

$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

Nguồn

2015-02-03 12:06:02

Tôi có điều này cùng một vấn đề. đây là sửa chữa của tôi

mã ban đầu của tôi mà không cập nhật các đối tượng

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

sử dụng các mục $ index đúng ràng buộc nó

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

ràng buộc này tạo ra một vẽ lại vấn đề bởi vì nó không biết liệu mục được cập nhật trong mảng có tham chiếu cùng một mục ở vị trí đó trước đây hay không.Để khắc phục điều này tôi đã phải thực hiện một thay đổi nhỏ để định dạng của mảng.

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

trở thành

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

và

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

trở thành

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

sau khi những thay đổi này, bạn nên có một ràng buộc thích hợp mà không cần bất kỳ vấn đề tái hòa nơi trường nhập mất tập trung.

Nguồn

2015-12-10 23:26:14

Điều này làm việc cho tôi !!!! Nhưng tôi không cần phải chuyển phần $ index trong ng-model –

Đầu tiên khai báo biến $scope.getIndex=0; và nhận chỉ mục từ mảng mục khi bạn nhấp vào nút lưu. Sau đó, chỉ định $index cho biến đó.

Bây giờ bạn có thể nhận được items[$scope.getIndex] ở bất kỳ đâu trong bộ điều khiển. Và giúp bạn cập nhật các mặt hàng mảng:

$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

Nguồn

2017-04-20 12:35:58

Làm thế nào để cập nhật giá trị ng-lặp trong js góc?

Trả lời

Các vấn đề liên quan