Binding model inside model in angularjs

Question

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?

Yes, the {{ }} show a compiled expression. So you need Angular to compile that for you. The best solution would be to make a directive that you repeat instead!! — Callum Linington
– Callum Linington, Commented Jul 18, 2016 at 12:27
Thanks @Callum Linington, can u suggest me some example for it — Mayur
– Mayur, Commented Jul 18, 2016 at 12:31
Can I just ask what you are trying to achieve, is it a format type operation where the source code will specify a format for the text to be outputted in? I wonder how the angular js expression has leaked into your business object — Callum Linington
– Callum Linington, Commented Jul 18, 2016 at 12:44
I have one input in modal which will allow user to add a title, so user can add filtertext before or after or in center or in anywhere, for example if user need to add 10 {{filtertext}} or {{filtertext}} 8 or he can type 10 per {{filtertext}} charges — Mayur
– Mayur, Commented Jul 18, 2016 at 12:49

rejo · Accepted Answer · 2016-07-18 13:38:15Z

1

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>

edited Jul 18, 2016 at 13:38

answered Jul 18, 2016 at 12:45

rejo

3,3405 gold badges29 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mayur Over a year ago

Thanks @Rejs, for your answer. i have modified the question little bit and then this approach is not working for me any help? as i any user can change fitertext position when ever he like. he can place left or right or center of some text

Durgesh Ahire · Accepted Answer · 2016-07-18 12:33:19Z

1

try this

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

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

answered Jul 18, 2016 at 12:33

Durgesh Ahire

1178 bronze badges

1 Comment

Mayur Over a year ago

Thanks @Durgesh, but this is not what i need to do.

Chanthu · Accepted Answer · 2016-07-18 12:45:35Z

angular.module('app', []).controller('controller', function($scope, $interpolate) {
  $scope.filterText = "rooms";
  $scope.items = [{
    "id": "1",
    "title": compile("10 {{filterText}}")
  }, {
    "id": "2",
    "title": compile("5 {{filterText}}")
  }, {
    "id": "3",
    "title": compile("8 {{filterText}}")
  }];

  function compile(text) {
    return $interpolate(text)($scope);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

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

What you want is to interpolate the title. You can you $interpolate service and interpolate a given expression using a specified scope.

Example: $interpolate('hello {{user}}')($scope);, where user is $scope.user = 'someone'

Alok · Accepted Answer · 2016-07-18 13:29:03Z

One another way of doing the same thing. Here you put a watch on the item what you want to watch and make changes to your object every time it changes. It is especially good if your objects are being populated from back end.

var app = angular.module('app', []).constant('_', window._)
  // use in views, ng-repeat="x in _.range(3)"
  .run(function($rootScope) {
    $rootScope._ = window._;
  });

app.controller('MainCtrl', function($scope) {
  $scope.filterText = 'rooms';
  $scope.resultsSample = [{
    "id": "1",
    "title": "10"
  }, {
    "id": "2",
    "title": "5"
  }, {
    "id": "3",
    "title": "8"
  }];

  $scope.$watch('filterText', function(newVal, oldVal) {
    console.log(oldVal + '  ' + newVal);
    $scope.results = $scope.resultsSample;

    _.forEach($scope.results, function(value, key) {
      if (value.title.indexOf(oldVal) == -1 || oldVal == '') {
        value.title = value.title + ' ' + newVal;
      } else {
        value.title = value.title.replace(oldVal, newVal);
      }
    });
  }, true);
});

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="MainCtrl">
  <input type='textbox' name='myFilter' ng-model='filterText' />
  <div ng-repeat='result in results'>
    Title : {{result.title}}
  </div>
</body>

Collectives™ on Stack Overflow

Binding model inside model in angularjs

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related