AngularJS数据推送

Question

I have the following AngularJS app.

From $scope.forms I create some inputs on the html part using ng-repeat .

The thing I dont understand is how to push the data from attributes: ["title", "firstname", "lastname", "address"] inputs into values: []

Can someone explain me how to push the input values into my values key? Or maybe if there is a best solution to explain?

function sampleCtrl($scope) {

  $scope.forms = [
    {
      title: "Something",
      attributes: ["title", "firstname", "lastname", "address"],
      values: [] //here i want the values from the attributes
    },
    {
      title: "Something else",
      attributes: ["title", "name", "job", "address"],
      values: [] //here i want the values from the attributes
    }   ]; }

http://jsfiddle.net/U3pVM/18198/

Answer 1

See @Grundy's answer for a direct approach where you don't have to change your model.

Do allow me to suggest a different approach though (that also includes the fact that you need to use ng-model to bind the input 's value ): model the attribute + value combination as an actual thing. So eg:

$scope.forms = [
    {
        title: "Something",
        pairs: [{label: "title", value: ""}, {label: "firstname", value: ""}]
    }
];

This view model is much easier to bind to in a view:

<div ng-repeat="pair in form.pairs">
    <input type="text" placeholder="{{pair.label}}" ng-model="pair.value" />
</div>

The reason I suggest this is because the $scope works best IMO if it's tailored to being bound to in views. If you need the other format (ie a values array) perhaps to send it off to a back end service, you'd best map the view model back to the appropriate data format. For example:

var values = $scope.forms[0].pairs.map(function(p) {
    return p.value;
});

See this forked fiddle for a full example.

Answer 2

You should see about ng-model . as model you can use values[$index] so, in values array values in same order as in attributes .

 function sampleCtrl($scope) { $scope.forms = [ { title: "Something", attributes: ["title", "firstname", "lastname", "address"], values: [] //here i want the values from the attributes }, { title: "Something else", attributes: ["title", "name", "job", "address"], values: [] //here i want the values from the attributes } ]; } 

 body { font-family: courier new; } h1 { font-size: 24px; margin: 0 0 20px; } h2 { font-size: 18px; } .form { margin: 0 0 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <h1>Form</h1> <div ng-controller="sampleCtrl"> <div class="form" ng-repeat="form in forms"> <h2>{{form.title}}</h2> <div ng-repeat="input in form.attributes"> <input type="text" ng-model="form.values[$index]" placeholder="{{input}}" /> </div> {{form.attributes}} {{form.values}} </div> </div> </div> 

Answer 3

I have added the changes to your fiddle:

<div ng-app>
    <h1>Form</h1>
    <div ng-controller="sampleCtrl">

        <div class="form" ng-repeat="form in forms">
          <h2>{{form.title}}</h2>     
          <div ng-repeat="input in form.attributes" ng-init="mod = []">
              <input type="text" placeholder="{{input}}" ng-init="mod[$index] = form.values[$index]" ng-model="mod[$index]"/>
          </div>
       </div>     
   </div>
</div>

http://jsfiddle.net/U3pVM/18201/

Answer 4

It's simple : Here is updated fiddle

Just added an ng-model that points at the exact same index in attributes array and that of in values array.

  <div ng-app>
    <h1>Form</h1>
    <div ng-controller="sampleCtrl">

        <div class="form" ng-repeat="form in forms">
          <h2>{{form.title}}</h2>     
          <div ng-repeat="input in form.attributes">
              <input type="text" ng-model="form.values[$index]"  placeholder="{{input}}" />
          </div>
        </div>
        <button ng-click="haha()">Test!</button>
    </div>
  </div>

And no change in JS. Only added new function haha() to test it out

function sampleCtrl($scope) {

  $scope.forms = [
    {
      title: "Something",
      attributes: ["title", "firstname", "lastname", "address"],
      values: [] //here i want the values from the attributes
    },
    {
      title: "Something else",
      attributes: ["title", "name", "job", "address"],
      values: [] //here i want the values from the attributes
    }
  ];

    $scope.haha = function(){
        console.log($scope.forms);
    }

}