Question

我有一个ng-repeat，在每个重复的li里面我试图放入ng-model，后来我想在ng-repeat之外进行双向数据绑定。请参阅以下jsbin。

http://jsbin.com/yutinifivi/edit?html,js,output

我知道在ng-model和ng-repeat上已经回答了很多问题。但我无法找到所需的解决方案。

如果有人耐心地理解我的问题，那么学习angularjs会有所帮助。

相关代码：

(function(){
  var app = angular.module("myApp",[]);
}());

(function(){
  var myCtrl = function($scope){
    $scope.selection_add = {};
    $scope.selection_edit = {};
    $scope.selection_delete ={};
    $scope.categories = [ 
        {"name": "Sport", "id": "50d5ad" } , 
        {"name": "General", "id": "687ffr" },
        {"name": "Activities", "id": "678ffb" },
        {"name": "Regards", "id": "678fff" },
        {"name": "Thanks", "id": "678fer" },
        {"name": "Goes", "id": "678fgf" },
        {"name": "Oppertnities", "id": "674ffr" },
        {"name": "Convince", "id": "654ffr" },
        {"name": "Mopols", "id": "623ffr" } 
    ];
    
    $scope.setCurrentCategory = function setCurrentCategory(category) {
      $scope.currentCategory = category;
    };
  };
  angular.module("myApp")
  .controller("myCtrl", myCtrl);
}());

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container" ng-controller="myCtrl">
  <div>
          <table>
              <tr>
                  <th>add</th>
                  <th>edit</th>
                  <th>delete</th>
              </tr>
              <tr ng-repeat="category in categories" ng-click="setCurrentCategory(category)">
                  <td><input id="{{category.id + '_add'}}" ng-model="selection_add[category.id]" type="text">{{category.name}}</td>
                  <td><input id="{{category.id + '_edit'}}" ng-model="selection_edit[category.id]" type="text">{{category.name}}</td>
                  <td><input id="{{category.id + '_delete'}}" ng-model="selection_delete[category.id]" type="text">{{category.name}}</td>
              </tr>
          </table>
    
        <h1>Add for {{currentCategory.name}}</h1>
        <input type="text" ng-model="selection_add[currentCategory.id]">
        <h1>Edit for {{currentCategory.name}}</h1>
        {{selection_edit[currentCategory.id]}}
        <h1>Delete for {{currentCategory.name}}</h1>
        {{selection_delete[currentCategory.id]}}
      </div>
</div>
</body>
</html>

Answer 1

您使用对象中的属性作为每个input的模型，然后尝试显示您输入的数据。但是，当您尝试显示数据时，不要将模型指向要更改的属性。你只需使用整个对象。

为了解决这个问题，我添加了一个存储currentCategory的点击，然后根据它显示所有数据 - demo。

对html的更改：

    <tr ng-repeat="category in categories" ng-click="setCurrentCategory(category)"> <-- note the ng-click that saves currentCategory -->


    <!-- currentCategory is used to change the model to our currentCategory, and display the category name -->
    <h1>Add for {{currentCategory.name}}</h1>
    <input type="text" ng-model="selection_add[currentCategory.id]">
    <h1>Edit for {{currentCategory.name}}</h1>
    {{selection_edit[currentCategory.id]}}
    <h1>Delete for {{currentCategory.name}}</h1>
    {{selection_delete[currentCategory.id]}}

将其添加到控制器：

$scope.setCurrentCategory = function setCurrentCategory(category) {
  $scope.currentCategory = category;
};

访问ng-repeat外部ng-repeat循环和双向数据绑定的子范围

1 个答案: