Mayur Mayur - 1 year ago 58
AngularJS Question

Binding model inside model in angularjs

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

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?

Answer Source

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

<script src=""></script>
  <body ng-app="plunker" ng-controller="MainCtrl">
    <div ng-repeat="item in compiledItems">
      Title : {{item}}