CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeatangularjs-controller
ralphcarlo
ralphcarlo

Reputation: 209

Passing values to ng-model from ng-repeat

I have a form that passes its inputs to ng-model before storing to the database. One of which is a dynamic value (pre-generated code) that is taken from its database 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>

Theoretically, once the ng-model gets the value, it then passes it to the insert call for the database to store it along with the rest of the fields.

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.");
    }
};

Unfortunately, this does not work. 1) I was told that you cannot simply pass an ng-value to an ng-model inside an input[text]. 2) Even if in the case that the value is passed to ng-model, I am not sure what to call inside the controller as scope.codes.code nor scope.formData.code do not seem to work and gets either a not defined error or 404.

In a nutshell, how do I:

Upvotes: 1

Views: 6347

Answers (2)

Kanak Singhal
Kanak Singhal

Reputation: 3282

I guess ng-init should help you out here.

Change your code segment from:

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

to:

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

Upvotes: 4

jme11
jme11

Reputation: 17372

This is really contrived, but here's a very simplified demo:

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>

You have the response already, so rather than use ng-repeat, just add the value to the formData.code on the controller. If you need to use a custom filter, you can pass in the $filter service as a dependency to your controller.

Edit:

I didn't notice the part about the formData.code being dependent on another form value, so I updated the demo to include a $watch function.

Upvotes: 1

Related Questions