2015-02-23 1 views
1

Я пытаюсь высушить мой html с помощью ng-repeat. С помощью следующего кода:AngularJS Concat ng-model

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

Проблема у меня пытается сцепить на «счет» в ng-model. Я хочу добавить ключ.

IE: ng-model="expense.{{key}}" но это не работает.

Предложения?

Спасибо!

+3

Это должно работать 'нг-модель = "расход [ключ]"' – Satpal

+0

http://stackoverflow.com/questions/28667366/angular-dynam ic-ng-model-name/28667521 # 28667521 это несколько похоже –

ответ

0

ключ в ng-repeat объявлен как переменный, а расход тоже переменный .. вы не можете смешивать __toString {{}} с переменной. Вы должны использовать cost.key как объект или массив или зависеть от типа в ng-модели. HTML-код - это только html, но ng-model имеет прослушиватель и переменную ожидания. Доступ к переменным как к хорошему, так и к переменному.

+0

Спасибо за ответ. По какой-то причине это не обновление модели, но когда я просто пишу все это в простом HTML, это так. Weird. – user44754

+0

поэтому попробуйте ng-model = "{{costs.key}}" .. работа? – daremachine

+0

или посмотрите http://stackoverflow.com/questions/19573001/how-to-generates-dynamically-ng-model-my-index-with-ng-repeat-in-angularj, это поможет вам – daremachine

2

либо вы можете предоставить ng-model = value или вы можете предоставить 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>

+0

Я передаю значение на вход. После нажатия кнопки значение из ввода вводится в объект $ scope.expense с их правильным именем. IE: $ scope.expense = {ren: ''}; Итак, вход имеет ng-модель «расход.ren». – user44754

+0

pls больше объясняют вашу проблему, потому что вы говорите что-нибудь о «нажатой кнопке» ее событии, но ng-model задает переменную $ scope. – daremachine

+0

@ user44754 Я могу вам помочь, если вы можете предоставить более подробный код. –

Смежные вопросы