In angular, can I combine ng-repeat with ng-model?

Question

I want ng-model for that button to be in relation with the ng-repeat:

<a ng-repeat="x in [1,2,3,4]" ng-model="myButton[x]">{{myButton[x]}}</a>

Controller:

var id = 4;
$scope.myButton[id] = ' :( ';

I would like to create a variable whose name is a combination of external values. Also, it would be very much appreciated if you have any tips how such a thing is generally approached, for I think that I am reinventing the wheel in a silly way.

Can't you just combine those external values in your controller? — Fernando Carvalhosa, Mar 05 '15 at 05:28
I made a function that passes 2 arguments: a name and an id. I would like to use the argument to form a variable ( `$scope.variable+id` ) that represents my ng model and declare a value for it. But I'm having trouble forming this variable that should represent my ng-model, and I'm having trouble to make the ng-model to begin with, since the name of it should depend on ng-repeat — brucelee, Mar 05 '15 at 05:35
Still didn't get it. Does this suit you? http://jsfiddle.net/4j1hrtcw/8/ — Fernando Carvalhosa, Mar 05 '15 at 05:40
`ng-model` is used for `input` elements, `select`, `textarea` - I'm not sure what you are trying to achieve with `ng-model` here. Do you just want to assign `x` to `myButton` array? — New Dev, Mar 05 '15 at 05:46
I should have mentioned that I've been learning webdeveloping for 1 month now. I'm a complete noob at programming, I generally have no idea. Watching your code I realized why it did't work for me and returned errors: I should have declared my ng-model as an array first, for I otherwise failed to assign a value to it. SOLVED. thank youuuuuuuuuuuuuuuuuuu add it as an answer man, I'll mark it with much much love edit for New Dev: can't I just use ng-model for everything? Or is it better practice to use it as an id when making links etc? why? — brucelee, Mar 05 '15 at 05:49
Glad i could help. [Take a look a this](http://stackoverflow.com/questions/12419619/whats-the-difference-between-ng-model-and-ng-bind). Use `ng-model` when the data can be changed by user input, otherwise stick with `ng-bind` or simply using `{{yourData}}` — Fernando Carvalhosa, Mar 05 '15 at 05:58
you can also pass the x value into a scope function like this https://jsfiddle.net/4j1hrtcw/9/ — Wreeecks, Mar 05 '15 at 06:45

score 1 · Accepted Answer · answered Mar 05 '15 at 05:55

Does this suit you?

HTML:

<div ng-app="myApp" ng-controller="myCtrl"> 
    <a ng-repeat="x in [1,2,3,4]" >{{myButton[x]}}</a>
</div>

JS:

var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) { 

    var first = 1, forth = 4;
    $scope.myButton = [];
    $scope.myButton[first] = ' 1st ';
    $scope.myButton[forth] = ' 4th ';
    $scope.myButton[5] = ' 5th ';
});

In angular, can I combine ng-repeat with ng-model?

1 Answers1