Question

我正在尝试在模型中添加模型，但它显示的是{{filterText}}，而不是显示文字。

以下是我的文字，其中将简要介绍我的尝试：

$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"}];

在html页面中：

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

现在我的结果为：

标题：10 {{item.filterText}}

标题：5 {{item.filterText}}

标题：8 {{item.filterText}}

但我需要：

标题：10护理

标题：5个房间

标题：8拿

我正在努力实现。但我无法实现它如何做到这一点？

Answer 1

试试这个

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

Answer 2

试试这个，它的工作原理。使用$interpolate，link

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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>

你想要的是插入 title。您可以使用指定的范围$interpolate服务并插入给定的表达式。

示例：$interpolate('hello {{user}}')($scope);，其中用户为$scope.user = 'someone'

Answer 4

另一种做同样事情的方式。在这里，您可以在项目上观察要观看的内容，并在每次更改时对对象进行更改。如果您的对象从后端填充，则特别好。

＆＃13;

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

＆＃13;

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

＆＃13;

angularjs中模型内部的绑定模型

4 个答案: