2016-07-25 21 views
0

私はangularjsの基本的な理解を得るためのチュートリアルに従っていました。私の場合、編集リンクはオブジェクトプロパティをテキストボックスに戻しません。私はここで間違ってやってコードとフィドルAngularJs簡単な編集

<body> 
<div class="scope" data-ng-app="mymodule" data-ng-controller="mycontroller"> 
    <h3>AngularJS Filter data sample </h3> 
    <br /> 
    Name:<br /> 
    <input type="text" data-ng-model="Name" /><br /> 
    <input type="text" data-ng-model="Position" /><br /> 
    <button data-ng-click="addfriend()"> Add Friend</button> 
    <br /> 
    <input type="text" data-ng-model="Namesearch" /><br /> 
    <ul> 
     <li class="li" data-ng-repeat="element in friendlist | filter:Namesearch | orderBy:'Name'"> 
      <strong> [{{$index + 1}}] {{ element.Name | uppercase}} working as {{ element.Position}} </strong> 
      [ <a href="#" ng-click="clearUser(element)">clear</a> 
      | <a href="#" ng-click="removeUser(element)">X</a> 
      | <a href="#" ng-click="editUser(1)">edit</a> 
      ] 
     </li> 
    </ul> 
</div> 
</body> 

とJSコードで午前聞かせください

var mymodule = angular.module('mymodule', []) 
mymodule.controller('mycontroller', ['$scope', function ($scope) { 
    $scope.friendlist = 
     [{ Name: 'Zia', Position: 'AM' }, { Name: 'Zia1', Position: 'PM' }, { Name: 'Zia2', Position: 'GM' } 
     ]; 

    $scope.editUser = function (id) { 

     for (i in $scope.friendlist) { 
      if ($scope.friendlist[i].Name == 'Zia') { 

       $scope.newFriend = angular.copy($scope.friendlist[i]); 
      } 
     } 
    } 
}]); 

fiddle

とも私が最初にclass="scope"の重要性を知りたいですdiv

+0

私はフィドルのリンクを表示しません。 –

+0

'for(i in $ scope.friendlist){' - 反復する際に通常の 'for'ループを使います。' for..in'はオブジェクトのプロパティを反復するためのものです。 – tymeJV

+0

フィドルリンクが追加されました – Zia

答えて

0

これで問題は解決しますか? http://jsfiddle.net/3hv7y369/

入力にコピーされた値を表示するにはnewFriend.NamenewFriend.Positionが必要です。私はまた、すべてのユーザーと連携するeditUser()機能を終了しました。

+0

と変更された値を更新してリストに再度表示する方法 – Zia

+0

'$ save.friendlist'の対応するエントリに値をコピーする '保存'ボタンを作成することをお勧めします。これにより、表示されたリストが自動的に更新されます。 – fdelia

関連する問題