1

Why doesn't this work in AngularJS?

<div class="inputbox" ng-repeat="publisherParam in publisherParams">
    <div>
        <label>{{ publisherParam.label }}</label>
    </div>
    <div>
        <input type="text" name="{{ publisherParam.label }}" ng-model="{{ publisherParam.label }}" required />
    </div>
</div>
<div class="submitbox">
    <button class="purple-btn" ng-disabled="publisherForm.$invalid">
        Add Network
    </button>
</div>

2 Answers 2

3
  1. You shouldn't be using {{ }} in the ng-model, you should write: ng-model="publisherParam.label"
  2. You can't use expressions in the input's name, it needs to be a static string to support field-level validation.

If you could share a jsFiddle I would be happy to help more with the actual code.

Sign up to request clarification or add additional context in comments.

1 Comment

Actually i need to make something like ng-model="publisherParam1" or something like that , but if I add another input dynamic then i need ng-model="publisherParam2" ..and I can not find how to add indexes or something to differentiate the ng-models
0

It sounds like you want to use an ng-repeat, and $index to get the index of the item to put in the form input field's name. I'm not sure what exactly you're trying to do, but hopefully this puts you in the right direction...

EDIT: Also, the name="" of an input is irrelevant when submitting a form in Angular, as you can just take the entire object you're altering in $scope and send that via AJAX.

HTML

 

<form name="publisherForm" ng-submit="formSubmit()">
    <div class="inputbox" ng-repeat="publisherParam in publisherParams">
        <div>
            <label>{{publisherParam.label}}</label>
        </div>
        <div>
           <!-- use $index to get the index of the item in the array -->
           <!-- note, no {{}} inside of the ng-model tag. 
               That's being $eval'ed so no {{}} needed -->
            <input type="text" name="publisherParam_label_{{$index}}" ng-model="publisherParam.label" required />
        </div>
    </div>
    <!-- just an add button so you can see it work -->
    <button type="button" ng-click="addPublisherParam()">Add</button>
    <!-- your submit button -->
    <div class="submitbox">  
        <button class="purple-btn" type="submit ng-disabled="publisherForm.$invalid">
            Add Network
        </button>
    </div>
</form>

JS

app.controller('YourController', function($scope) {
   //this is the array you're displaying
   $scope.publisherParams = [
       { label: 'First Label' },
       { label: 'Second Label' }
   ];

   //just an indexer
   var p = 0;
   $scope.addPublisherParam = function(){
       //add a new publisher param.
       $scope.publisherParams.push({ label: 'New Label ' + p++ });
   };

   $scope.formSubmit = function(){
       //do something here.
   };
});

3 Comments

while it is true that input names don't matter for posting data / model binding, the field names are actually used for validation and this is why I've mentioned it.
This is true, for individual field level validation display this will get tricky.
I'm just trying to contribute in any angular question I can. I love this framework, and I'd like it to take off a little more than it has.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.