Concatenate variable name in HTML code like:
app.controller code
$scope.name ='abc';
$scope.abc123 = response.data;
HTML code
<h1>{{name}}</h1>
<h1>{{{{name}}123}}</h1> <!-- here i need value of abc123 -->
-
Is this working? <h1>{{{{name}}123}}</h1>user4874420– user48744202017-03-31 11:34:49 +00:00Commented Mar 31, 2017 at 11:34
-
Y u wanna concatenate and use? <h1>{{abc123}}</h1> this is just a variable name!user4874420– user48744202017-03-31 11:35:35 +00:00Commented Mar 31, 2017 at 11:35
-
@VeeraBhadraRao No it's not workinggifpif– gifpif2017-03-31 11:36:44 +00:00Commented Mar 31, 2017 at 11:36
Add a comment
|
4 Answers
You can this with controller as syntax:
var myApp = angular.module('myApp',[]);
myApp.controller("MyCtrl",MyCtrl);
function MyCtrl() {
this.name = 'abc';
this.abc123 = 'value';
}
vm.name+'123' is dynamic key and then get from vm
<div ng-app="myApp" ng-controller="MyCtrl as vm" >
Name value: {{vm.name+'123'}} and dynamic value: {{vm[vm.name+'123']}}
</div>
Double times curly braces wouldn't work since it tries to interpret 123 as number but you can do so using combination of ng-bind and {{..}}. Like this:
<pre ng-bind="{{name}}123"></pre>
Here's working example:
angular.module('myApp', []);
function myCtrl($scope) {
$scope.model = {};
$scope.name = 'abc'
$scope.abc123 = "test"
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<pre ng-bind="{{name}}123"></pre>
</div>
</body>
Comments
$scope.name ='abc';
$scope.abc123 = response.data;
You are not creating variable with dynamic name; hence it should be accessed as below
<h1>{{name}}</h1>
<h1>{{abc123}}</h1> //as $scope.abc123 is defined in controller
Comments
Here it is
angular.module('myApp', []);
function myCtrl($scope) {
$scope.model = {};
$scope.name = 'abc'
$scope.name2 = 'def'
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{name}} 123 {{name2}}
</div>
</body>