1

我无法弄清楚如何仅在用户从预先输入菜单中选择或单击搜索按钮时才更新动态数据。

现在，与搜索查询相关的动态内容会在输入值更改时自动更新（内容消失）。我希望内容保持可见，直到在预先输入列表中单击新选择或单击搜索按钮。

任何见解都将不胜感激！谢谢！

Plunker 演示：

http://plnkr.co/edit/jVmHwIwJ0KOKCnX6QjVa?p=preview

代码：

<!-- HTML -->
  <body ng-controller="MainController">

<!-- Search -->
<div class="well">
  <p>Search the term "content"</p>
  <form role="form">
    <div class="form-group clearfix search">
      <input type="text" ng-model="selectedContent" ng-options="query as query.searchQuery for query in searchData" bs-typeahead="bs-typeahead" class="form-control search-field"/>
      <button type="button" class="btn btn-primary search-btn"><span class="glyphicon glyphicon-search"></span></button>
    </div>
  </form>
</div>

<!-- Dynamic Content -->
<div class="well">
  <h4>{{ selectedContent.contentTitle }}</h4>
  <ul>
    <li ng-repeat="item in selectedContent.headlines">{{item.headline}}</li>
  </ul>
</div>


<!-- typeahead template -->
<ul class="typeahead dropdown-menu" tabindex="-1" ng-show="$isVisible()" role="select">
<li role="presentation" ng-repeat="match in $matches" ng-class="{active: $index == $activeIndex}">
  <a href="" role="menuitem" tabindex="-1" ng-click="$select($index, $event)" ng-bind="match.label"></a>
</li>


<!-- JS -->
var app = angular.module('demoApp', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])
.config(function ($typeaheadProvider) {
  angular.extend($typeaheadProvider.defaults, {
    template: 'ngstrapTypeahead.html',
    container: 'body'
   });
});

function MainController($scope, $templateCache, $http) {

  $scope.selectedContent = '';

  $http.get('searchData.json').then(function(response){
    $scope.searchData = response.data;
    return $scope.searchData;
  });

};
4

1 回答 1

0

您可以使用如下指令：

app.directive('mySearch', function(){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function($scope, $element, $attrs, ngModel){
      ngModel.$render = function(){
         if (angular.isObject($scope.selectedContent)) {
           $scope.clickedContent = $scope.selectedContent;
         }
      }
       $scope.updateModel = function() {
         $scope.clickedContent = $scope.selectedContent;
      }
    }
  }

})

笨蛋

编辑：

我使用 ngModelController 添加。ngModel.$render每当模型更新时，您设置的函数就会被调用。如果您单击typahead 弹出窗口，则模型selectedContent将是一个对象，否则它将是一个字符串。如果它是一个对象（意味着用户单击了打字提示弹出窗口），我们将执行与updateModel函数中相同的操作。

于 2014-06-15T16:57:18.560 回答