2015-02-23 72 views
1

我想通過使用ng-repeat來幹我的html。用下面的代碼: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

這應該工作'NG-模型= 「費用[關鍵]」' – Satpal 2015-02-23 17:01:07

+0

http://stackoverflow.com/questions/28667366/angular-dynam ic-ng-model-name/28667521#28667521這有些類似 – 2015-02-23 17:18:00

回答

0

ng-repeat中的鍵被聲明爲變量,開銷也是變量..您不能將__toString {{}}與變量混合使用。您應該使用expense.key作爲對象或數組或依賴於ng-model中的類型。 HTML標識符只是html,但ng-model有監聽器並且期望​​變量。 作爲變量訪問它的好方法。

+0

感謝您的回答。無論出於何種原因,它不會更新模型,但是當我用普通的HTML將它全部寫出來時,它就是這樣。奇怪的。 – user44754 2015-02-23 17:10:12

+0

因此請嘗試ng-model =「{{expense.key}}」..工作? – daremachine 2015-02-23 17:11:59

+0

或看看http://stackoverflow.com/questions/19573001/how-to-generates-dynamically-ng-model-my-index-with-ng-repeat-in-angularj它會幫助你 – daremachine 2015-02-23 17:15:46

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-model「expense.ren」。 – user44754 2015-02-23 17:17:54

+0

請更詳細地解釋你的問題,因爲你說「按鈕點擊」它的事件,但是ng-model設置$ scope變量。 – daremachine 2015-02-23 17:24:19

+0

@ user44754如果您可以提供更詳細的代碼,我可以幫助您。 – 2015-02-23 17:25:06