Question

我有一个表单在存储到数据库之前将其输入传递给ng-model。其中一个是从其数据库表中获取的动态值（预生成代码）。

<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传递给ng-model内的input[text]。 2）即使在值传递给ng-model的情况下，我也不确定在控制器内调用什么，因为scope.codes.code和scope.formData.code似乎不起作用并获得not defined错误或404。

简而言之，我该怎么做：

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

Answer 1

我想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>

Answer 2

这是非常人为的，但这是一个非常简化的演示：

＆＃13;

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 = '';
    }
  });
  
}]);

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

修改

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

将值从ng-repeat传递给ng-model

2 个答案: