AngularJS Concat ng-model

Question

I'm trying to DRY my html by using ng-repeat. With the following code:

    <div class="form-group" ng-repeat="(key, value) in expense">
        <label for={{key}} class="col-sm-2 control-label">{{key}}:</label>

      <div class="col-sm-10">
        <input type="number" class="form-control" id={{key}} ng-model="expense" />
      </div>
    </div>

The problem I'm having is trying to concatenate to the "expense" in ng-model. I want to add the key.

IE: ng-model="expense.{{key}}" but that doesn't work.

Suggestions?

Thanks!

http://stackoverflow.com/questions/28667366/angular-dynamic-ng-model-name/28667521#28667521 this is somewhat similar — Pankaj Parkar, Feb 23 '15 at 17:18

score 2 · Answer 1 · answered Feb 23 '15 at 17:14

either you can provide ng-model = value or you can provide ng-model=expense[key]

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  $scope.expense = {
    cost: 1,
    basic: 2
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    
    <div class="form-group" ng-repeat="(key, value) in expense">
        <label for={{key}} class="col-sm-2 control-label">{{key}}:</label>

      <div class="col-sm-10">
        <input type="number" class="form-control" id={{key}} ng-model="value" />
      </div>
    </div>
  </body>

</html>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  $scope.expense = {
    cost: 1,
    basic: 2
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    
    <div class="form-group" ng-repeat="(key, value) in expense">
        <label for={{key}} class="col-sm-2 control-label">{{key}}:</label>

      <div class="col-sm-10">
        <input type="number" class="form-control" id={{key}} ng-model="expense[key]" />
      </div>
    </div>
  </body>

</html>

I'm passing the value to the input. Once the button is clicked, the value from the input gets pushed into the $scope.expense object with their correct name. IE: $scope.expense = {ren: ''}; So, the input has an ng-model of "expense.ren". — user44754, Feb 23 '15 at 17:17
pls more explain your problem because you say anything about "button clicked" its event but ng-model set $scope variable. — daremachine, Feb 23 '15 at 17:24
@user44754 I can help you if you can provide more detailed code in question. — Jenish Rabadiya, Feb 23 '15 at 17:25
Sorry about that. https://github.com/Roilan/Budget/tree/master/app/scripts I'm trying to DRY the markup in views/budget.html. It's repeating a ton and I feel like it can be better. I might taken the wrong approach with ng-repeat but what I have above (first post) is what I was going go. — user44754, Feb 23 '15 at 17:27

daremachine · Answer 2 · 2015-02-23T17:08:54.153

0

key in ng-repeat is declared as variable and expense is variable too .. you can not mixed __toString {{}} with variable. You should use expense.key as object or array or depend on type in ng-model. HTML ID is only html but ng-model have listener and expect variable. Access to both as variables its good approach.

edited Feb 23 '15 at 17:08

answered Feb 23 '15 at 17:02

daremachine

2,678
2
23
34

Thanks for the answer. For whatever reason it's not update the model but when I just write it all out in plain HTML it is. Weird. – user44754 Feb 23 '15 at 17:10
or look at http://stackoverflow.com/questions/19573001/how-to-generates-dynamically-ng-model-my-index-with-ng-repeat-in-angularj it would help to you – daremachine Feb 23 '15 at 17:15
or this http://stackoverflow.com/questions/20713347/binding-ng-repeat-and-ng-model-in-controller – daremachine Feb 23 '15 at 17:17

AngularJS Concat ng-model

2 Answers2