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!

stackoverflow.com/questions/28667366/… this is somewhat similar — Pankaj Parkar
– Pankaj Parkar, Commented Feb 23, 2015 at 17:18

Jenish Rabadiya · Accepted Answer · 2015-02-23 17:14:14Z

2

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="[email protected]" 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="[email protected]" 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>

answered Feb 23, 2015 at 17:14

Jenish Rabadiya

6,7766 gold badges35 silver badges62 bronze badges

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

4 Comments

user44754 Over a year ago

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

daremachine Over a year ago

pls more explain your problem because you say anything about "button clicked" its event but ng-model set $scope variable.

Jenish Rabadiya Over a year ago

@user44754 I can help you if you can provide more detailed code in question.

user44754 Over a year ago

Sorry about that. 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.

daremachine · Accepted Answer · 2015-02-23 17:08:54Z

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, 2015 at 17:08

answered Feb 23, 2015 at 17:02

daremachine

2,7982 gold badges27 silver badges36 bronze badges

3 Comments

user44754 Over a year ago

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.

daremachine Over a year ago

or look at stackoverflow.com/questions/19573001/… it would help to you

daremachine Over a year ago

or this stackoverflow.com/questions/20713347/…

Collectives™ on Stack Overflow

AngularJS Concat ng-model

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related