从 ng-repeat 向 ng-model 传递值

Question

我有一个表单，在存储到数据库之前将其输入传递给 ng-model。其中之一是从其数据库 table.

中获取的动态值（预生成代码）

<div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1">
  <input class="form-control" type="text" name="code" ng-model="formData.code" ng-value="codes.code" readonly="" />
</div>

理论上，一旦 ng-model 获取值，它就会将其传递给 insert 调用，以便数据库将其与其余字段一起存储。

scope.processForm = function(isValid){
    scope.$submitted = true;

    if(isValid && state.$current=='registration.signupapp') {
        http.post("server/insert.php",{'code': scope.codes.code, 'fullname': scope.formData.name, 'instagram': scope.formData.igname, 'email': scope.formData.email, 'mobile': scope.formData.mobile, 'location': scope.formData.location.type, 'branch': scope.formData.branches.branch}).success(function(data, status, headers, config){
    console.log("inserted successfully");
    });
        state.go('registration.success');
    } else if(!isValid) {
        //alert("Please make sure that you entered everything correctly.");
    }
};

不幸的是，这不起作用。 1) 有人告诉我不能简单地将 ng-value 传递给 input[text] 中的 ng-model。 2）即使在值被传递给 ng-model 的情况下，我也不确定在控制器内部调用什么，因为 scope.codes.code 和 scope.formData.code 似乎都不起作用并且得到一个not defined 错误或 404.

简而言之，我如何：

获取 ng-repeat 生成的值设置为 limitTo:1。
实时存储到ng-model（因为这非常依赖于动态下拉菜单）。
将 ng-model 的值传回给 controller。
发送回服务器并存储到数据库。

Answer 1

这确实是做作的，但这是一个非常简化的演示：

var app = angular.module('demo', []);

app.filter('myFilter', function(){
  return function(data){
    return data[0];
  };
});

app.controller('MainCtrl', ['$scope', '$filter', function($scope, $filter){
  var myfilter = $filter('myFilter');
  
  $scope.response = ['001', '002', '003', '004', '005'];
  
  $scope.items = ['Item 1', 'Item 2', 'Item 3']
  
  $scope.formData = {};
  
  $scope.$watch('formData.select', function(newval){
    if (newval === 'Item 1') {
      $scope.formData.code = myfilter($scope.response);
    } else {
      $scope.formData.code = '';
    }
  });
  
}]);

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css";

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div class="container" ng-app="demo" ng-controller="MainCtrl">
  <pre>formData.code = {{formData.code || "No Code for this Item"}}</pre>
  <div class="form-group">
    <label>Select a Value: <em>Choose Item 1 to update formData.code</em></label>
    <select class="form-control" ng-model="formData.select" ng-options="item as item for item in items"></select>
  </div>
  <div class="form-group">
    <label>formData.code:</label>
    <input class="form-control" type="text" name="code" ng-model="formData.code"  />
  </div>
</div>

您已经有了响应，所以不要使用 ng-repeat，只需将值添加到控制器上的 formData.code。如果您需要使用自定义过滤器，您可以将 $filter 服务作为依赖项传递给您的控制器。

编辑：

我没有注意到 formData.code 依赖于另一个表单值的部分，所以我更新了演示以包含 $watch 函数。

Answer 2

我猜 ng-init 应该能帮到你。

更改您的代码段：

<div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1">
  <input class="form-control" type="text" name="code" ng-model="formData.code" ng-value="codes.code" readonly="" />
</div>

至：

<div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1" ng-init="formData.code=codes.code">
  <input class="form-control" type="text" name="code" ng-model="formData.code" readonly="" />
</div>

从 ng-repeat 向 ng-model 传递值

Passing values to ng-model from ng-repeat

angularjs

angularjs-scope

angularjs-ng-repeat

angularjs-controller