Binding model inside model in angularjs

debugcn Published at Dev

Mayur

I am trying to add model inside model but it is showing {{filterText}} instead of showing text.

Below is my text which will brief how i am trying:

$scope.filterText = "rooms";  //text will changed by user when ever he will require
$scope.items = [{"id":"1","title":"10 {{item.filterText}}","filterText":"care"},{"id":"2","title":"5 {{item.filterText}}","filterText":"rooms"},{"id":"3","title":"8 {{item.filterText}}","filterText":"Take"}];

In html page:

<div ng-repeat="item in items">
Title : {{item.title}}
</div>

Right now i am getting result as:

Title : 10 {{item.filterText}}

Title : 5 {{item.filterText}}

Title : 8 {{item.filterText}}

But i need:

Title : 10 care

Title : 5 rooms

Title : 8 Take

I am struggling to achieve. but i am not able to achieve it how to do this?

rejo

Try this , its working . Use $interpolate , link

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

app.controller('MainCtrl', function($scope,$interpolate) {
$scope.filterText = "rooms";  //text will changed by user when ever he will require
$scope.items = $scope.items = [{"id":"1","title":"10 {{item.filterText}}","filterText":"care"},{"id":"2","title":"5 {{item.filterText}}","filterText":"rooms"},{"id":"3","title":"8 {{item.filterText}}","filterText":"Take"}];;


$scope.compiledItems = [];
for(var i=0;i<$scope.items.length;i++){
  $scope.item = {};
  $scope.item.filterText = $scope.items[i].filterText;
  var text = $interpolate($scope.items[i].title)($scope); 
  $scope.compiledItems.push(text); 
}

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <body ng-app="plunker" ng-controller="MainCtrl">
    <div ng-repeat="item in compiledItems">
      Title : {{item}}
     </div> 
  </body>

Collected from the Internet

Please contact [email protected] to delete if infringement.