如何從一個對象數組鍵

Question

此綁定NG-模型元素是該方案

angular.module('myApp', []) 
 
.controller('bookCtrl', function($scope) { 
 
    $scope.book = { 
 
     name: 'Session Invites', 
 
     friends: [ 
 
      {'id': 1, 'name': 'raju' }, 
 
      {'id': 2, 'name': 'radha' }, 
 
      {'id': 3, 'name': 'luttappi' }, 
 
      ] 
 
    }; 
 
    $scope.update = function(){ 
 
     $scope.book.friends[1] = {'id': 2, 'name': 'sam' }; 
 
     alert($scope.book.friends[1].name); 
 
    }; 
 
});

<div ng-controller="bookCtrl"> 
 
    <input type="text" ng-model="book.friends[1].name"/> 
 
    <input type="button" id="btn" name="btn" value="update" ng-click="update()"/> 
 
</div>

我想用「身份證」，而不是數組「指數」。 fiddle

<input type="text" ng-model="book.friends[1].name"/> 

Answer 1

這將有可能與一個for loop，但是，我認爲，這項工作圍繞以下也許有趣的爲您服務。

只需更改JSON的結構，使用Object.proerty而不是數組。它會做的伎倆。

angular.module('myApp', []) 
.controller('bookCtrl', function($scope) { 
    $scope.book = { 
     name: 'Session Invites', 
     friends: { 
      id1: {'name': 'raju' }, 
      id2: {'name': 'radha' }, 
      id3: {'name': 'luttappi' }, 
     } 
    }; 
    $scope.update = function(){ 
     $scope.book.friends.id1 = {'name': 'sam' }; 
     alert($scope.book.id1.name); 
    }; 
}); 

注： 有一個關於這個解決辦法值得關注的是提供JSON的API。如果數據recived結構固定和角度需要將JSON轉換爲此結構。您可能需要知道將要轉換的data有多大。因爲這樣的任務會導致Memory Leaked，然後JavaScript Garbage Collection。它會減慢你的應用程序顯著

Answer 2

你可以這樣做，以這種方式：

angular.module('myApp', []) 
 
    .controller('bookCtrl', function ($scope) { 
 
    $scope.book = { 
 
     name: 'Session Invites', 
 
     friends: [{ 
 
      'id': 1, 
 
       'name': 'raju' 
 
     }, { 
 
      'id': 2, 
 
       'name': 'radha' 
 
     }, { 
 
      'id': 3, 
 
       'name': 'luttappi' 
 
     }] 
 
    }; 
 
    $scope.update = function (friend) { 
 

 
     alert(friend.name); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="bookCtrl"> 
 
    <div ng-repeat="friend in book.friends"> 
 
     <input type="text" ng-model="friend.name" /> 
 
     <input type="button" id="btn" name="btn" value="update" ng-click="update(friend)" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

您可以在此改用：

angular.module('myApp', []) 
    .controller('bookCtrl', function($scope) { 
    $scope.GetOne={}; 
     $scope.book = { 
      name: 'Session Invites', 
      friends: [ 
       {'id': 1, 'name': 'raju' }, 
       {'id': 2, 'name': 'radha' }, 
       {'id': 3, 'name': 'luttappi' }, 
       ] 
     }; 
     $scope.update = function(){ 
      $scope.GetOne=$scope.book.friends[1]; 
      alert($scope.GetOne.name); 
     }; 
    }); 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="myApp"> 
    <div ng-controller="bookCtrl"> 
     <input type="text" ng-model="GetOne.name" /> 
     <input type="button" id="btn" name="btn" value="update" ng-click="update()" /> 
    </div> 
    </div>