2014-11-04 47 views
13

Tôi muốn cập nhật một đối tượng trong một mảng đối tượng. Có khả năng nào khác hơn là lặp qua tất cả các mục và cập nhật một mục phù hợp không? Mã hiện tại trông giống như sau:Đối tượng cập nhật góc trong mảng

angular.module('app').controller('MyController', function($scope) { 
    $scope.object = { 
     name: 'test', 
     objects: [ 
      {id: 1, name: 'test1'}, 
      {id: 2, name: 'test2'} 
     ] 
    }; 

    $scope.update = function(id, data) { 
     var objects = $scope.object.objects; 

     for (var i = 0; i < objects.length; i++) { 
      if (objects[i].id === id) { 
       objects[i] = data; 
       break; 
      } 
     } 
    } 
}); 
+3

gì quan điểm như thế nào? Nếu bạn có một tham chiếu đến đối tượng mà bạn đang gọi 'update()', chuyển vào đối tượng thay vì id. –

+0

thêm vào đề xuất của anthony .. 'ng-click =" cập nhật (obj, dữ liệu) "' thay vì 'ng-click =" cập nhật (obj.id, dữ liệu) "' –

+0

Ngoài ra, bạn có muốn kiểm tra id trước đó không thêm? Tôi tin rằng, điều đó không cần thiết trong trường hợp của bạn? – Asik

Trả lời

7

Có một số cách để thực hiện điều đó. Tình hình của bạn không rõ ràng.

-> Bạn có thể chuyển chỉ mục thay vì id. Sau đó, chức năng cập nhật của bạn sẽ như sau:

$scope.update = function(index, data) { 
    $scope.object.objects[index] = data; 
}; 

-> Bạn có thể sử dụng ng-lặp lại trên chế độ xem của bạn và liên kết các thuộc tính đối tượng với các yếu tố đầu vào.

<div ng-repeat="item in object.objects"> 
    ID: <input ng-model="item.id" /> <br/> 
    Name: <input ng-model="item.name" /> <br/> 
</div> 
+0

Đã thêm một người plunker bên dưới –

+2

Nếu bạn đang cố cập nhật theo id, thì chỉ mục không nhất thiết phải tương ứng với id. Bạn có thể kết thúc với bản ghi sai. – Sam

2

Đi tắt plunker bạn, tôi sẽ làm điều này:

  • Thay đổi

    <a href="javascript:;" ng-click="selectSubObject(subObject.id)">Edit</a> 
    

    <a href="javascript:;" ng-click="selectSubObject($index)">Edit</a> 
    
  • Sau đó sử dụng chỉ số mảng trong vòng của bạn $scope.selectSubObject phương pháp để truy cập trực tiếp phần tử mong muốn của bạn. Một cái gì đó như thế này:

    $scope.selectSubObject = function(idx) { 
        $scope.selectedSubObject = angular.copy(
        $scope.selectedMainObject.subObjects[idx] 
    ); 
    }; 
    

Tuy nhiên, nếu bạn chỉ có id để đi tắt của, sau đó bạn có thể sử dụng filterService góc để lọc trên id mà bạn muốn. Nhưng điều này sẽ vẫn làm một vòng lặp và lặp qua mảng trong nền.

Xem tài liệu cho ngrepeat để xem các biến mà nó hiển thị.

+0

Lưu ý rằng góc cạnh.bản sao sẽ tạo ra một đối tượng mới, do đó bạn sẽ không nhận được sự ràng buộc 2 chiều mà góc cạnh thực sự hữu ích. Nếu bạn là đồng bằng để cập nhật các đối tượng chính với những thay đổi của mình, sau đó tôi không nghĩ rằng angular.copy là cần thiết. –

+0

Có tốt hơn khi sử dụng chỉ mục ở đây thay vì id, nhưng vấn đề vẫn như cũ. Tôi phải cập nhật các đối tượng trong đối tượng chính của tôi và không biết thực sự làm thế nào để làm điều đó, bởi vì tôi không biết chỉ mục. Tôi sử dụng phương thức sao chép vì người dùng có thể quay lại mà không lưu thay đổi. Nếu tôi đề cập đến đối tượng thực, mọi thay đổi sẽ được lưu mà không cần nhấn nút lưu. Vấn đề của tôi là phương thức lưu của SubObjectController của tôi. Đã thêm một ngã ba http://plnkr.co/edit/YcPMe0uFWFNgDpZddjt6?p=preview –

+1

Nếu mục tiêu là KHÔNG lặp qua mảng và bạn không có chỉ mục thì điều đó là không thể. Như tôi đã đề cập trước đây, bạn có thể sử dụng [dịch vụ lọc $] góc cạnh (https://docs.angularjs.org/api/ng/filter/filter) để lọc mảng của bạn, nhưng điều này thực hiện một vòng lặp bên dưới trang bìa. Ví dụ về việc sử dụng dịch vụ lọc $: '$ filter ('filter') ($ scope.selectedMainObject.subObjects, {id: $ scope.selectedSubObject.id)'. Một lựa chọn khác (những gì tôi sẽ làm) là thiết kế lại việc thực hiện để tiết kiệm chỉ mục. Tôi đã cập nhật plunker của bạn để lưu các chỉ số: http://plnkr.co/edit/5udyU3o1AR5z5dP1ReFJ?p=preview – tokafew420

7

Bộ lọc giúp tìm phần tử từ mảng, cũng có thể được sử dụng để cập nhật phần tử trong mảng trực tiếp. Trong mã bên dưới [0] -> là đối tượng được truy cập trực tiếp.

Plunker Demo

$filter('filter')($scope.model, {firstName: selected})[0]

5

Vượt qua mục phương pháp cập nhật của bạn. Hãy xem mẫu dưới đây.

function MyCtrl($scope) { 
 
    $scope.items = 
 
    [ 
 
     {name: 'obj1', info: {text: 'some extra info for obj1', show: true}}, 
 
     {name: 'obj2', info: {text: 'some extra info for obj2', show: false}}, 
 
    ]; 
 
    $scope.updateName = function(item, newName){ 
 
    item.name = newName; 
 
    } 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app> 
 
    <table ng-controller="MyCtrl" class="table table-hover table-striped"> 
 
    <tr ng-repeat="x in items"> 
 
     <td> {{ x.name }}</td> 
 
     <td> 
 
      <a href="#" ng-show="!showUpdate" ng-click="someNewName = x.name; showUpdate = true">Update</a> 
 
      <div ng-show="showUpdate" ><input type="text" ng-model="someNewName"> <input type="button" value="update" ng-click="updateName(x, someNewName); showUpdate = false;"></div> 
 
     </td> 
 
    </tr> 
 

 
    </table> 
 
</body>

+0

điều này giải quyết vấn đề của tôi. – prudhvi259

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