Question

来自tutorial。搜索框的样式正确。

但是当我键入下拉列表时，控制器中的静态数据不会出现。

这是我的模板。

<div class="container-fluid">

<div class="row">
  <div class="col-sm-12 col-md-4 col-lg-3">

    <div class="panel panel-default panel-filter">
      <div class="panel-heading">
        <h3 class="panel-title">Calendar Filter</h3>
      </div>
      <div class="panel-body">

        <div class="section section-filter">

        <form ng-submit="$event.preventDefault()">
          <div class="form-group" style="margin-bottom:0">
            <div class="input-group input-group-sm addon-left">
             <span class="input-group-addon">View By</span>
             <select class="form-control" name="select_view" id="select_view">

              <option value="taskown">Task Owner</option>
              <option value="taskacc">Task Account</option>
             </select>
            </div>
          </div>

          <div class="form-group-taskown">
            <div class="space15"></div>
            <div class="form-group">
              <div class="input-group input-group-sm addon-left">
               <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<div class="autocompletedemoCustomTemplate">
<md-autocomplete
          ng-disabled="taskCalendarCtrl.isDisabled"
          md-no-cache="taskCalendarCtrl.noCache"
          md-selected-item="taskCalendarCtrl.selectedItem"
          md-search-text-change="taskCalendarCtrl.searchTextChange(taskCalendarCtrl.searchText)"
          md-search-text="taskCalendarCtrl.searchText"
          md-selected-item-change="taskCalendarCtrl.selectedItemChange(item)"
          md-items="item in taskCalendarCtrl.querySearch(taskCalendarCtrl.searchText)"
          md-item-text="item.name"
          md-min-length="0"
          placeholder=""
          md-menu-class="autocomplete-custom-template">
        <md-item-template>
          <span class="item-title">
            <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
            <span> {{item.name}} </span>
          </span>
          <span class="item-metadata">
            <span class="item-metastat">
              <strong>{{item.watchers}}</strong> watchers
            </span>
            <span class="item-metastat">
              <strong>{{item.forks}}</strong> forks
            </span>
          </span>
        </md-item-template>
      </md-autocomplete>
    </div>




               <!--
              <input type="text" class="form-control" id="searchBox" name="typeahead_example_1" ng-model="searchBox" ng-change="change(text)" auto-complete ui-items="users">-->
              </div>
            </div>
          </div>

        </form>

        </div><!--/section-->

      </div>
    </div>

  </div>

  <div class="col-sm-12 col-md-8 col-lg-6">
    <div class="section section-calendar">
      <div id='calendar'></div>
    </div><!--/section-->
  </div>

  <div class="space20 hidden-lg"></div>
  <div class="col-sm-12 col-sm-offset-0 col-md-8 col-md-offset-4 col-lg-3 col-lg-offset-0">
    <div class="panel panel-default panel-tasks">
      <div class="panel-heading">
        <h3 class="panel-title">Tasks</h3>
      </div>
      <div class="list-group" ng-repeat="task in taskList | limitTo: 5"> 
        <a href="{{task.url}}" class="list-group-item"> 
          <span class="badge">{{task.status}}</span>
          <h4 class="list-group-item-heading">{{task.heading}}</h4> 
          <ul class="list-unstyled">
            <li><strong>Assigned To:</strong>{{task.assignedTo}}</li>
            <li><strong>Releted To:</strong>{{task.relatedTo}}</li>
          </ul>
        </a> 
      </div><!--/list-group-->
    </div>
  </div>
</div><!--/row-->

</div> <!-- /container -->

和控制器又名taskCalendarCtrl

'use strict';
 angular

.module('taskCalendar')


    .controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account', function($scope, task , user, account) {
    }], taskCalendarCtrl);

  function taskCalendarCtrl ($timeout, $q, $log) {
    var self = this;

    self.simulateQuery = false;
    self.isDisabled    = false;

    self.repos         = loadAll();
    self.querySearch   = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange   = searchTextChange;

    // ******************************
    // Internal methods
    // ******************************

    /**
     * Search for repos... use $timeout to simulate
     * remote dataservice call.
     */
    function querySearch (query) {
      var results = query ? self.repos.filter( createFilterFor(query) ) : self.repos,
          deferred;
      if (self.simulateQuery) {
        deferred = $q.defer();
        $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
        return deferred.promise;
      } else {
        return results;
      }
    }

    function searchTextChange(text) {
      $log.info('Text changed to ' + text);
    }

    function selectedItemChange(item) {
      $log.info('Item changed to ' + JSON.stringify(item));
    }

    /**
     * Build `components` list of key/value pairs
     */
    function loadAll() {
      var repos = [
        {
          'name'      : 'Angular 1',
          'url'       : 'https://github.com/angular/angular.js',
          'watchers'  : '3,623',
          'forks'     : '16,175',
        },
        {
          'name'      : 'Angular 2',
          'url'       : 'https://github.com/angular/angular',
          'watchers'  : '469',
          'forks'     : '760',
        },
        {
          'name'      : 'Angular Material',
          'url'       : 'https://github.com/angular/material',
          'watchers'  : '727',
          'forks'     : '1,241',
        },
        {
          'name'      : 'Bower Material',
          'url'       : 'https://github.com/angular/bower-material',
          'watchers'  : '42',
          'forks'     : '84',
        },
        {
          'name'      : 'Material Start',
          'url'       : 'https://github.com/angular/material-start',
          'watchers'  : '81',
          'forks'     : '303',
        }
      ];
      return repos.map( function (repo) {
        repo.value = repo.name.toLowerCase();
        return repo;
      });
    }

    /**
     * Create filter function for a query string
     */
    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);

      return function filterFn(item) {
        return (item.value.indexOf(lowercaseQuery) === 0);
      };

    }
  }

点击并在搜索框中输入

时出现这些错误

有关我的错误的更多详细信息

Answer 1

您的代码中的控制器声明错误。

控制器依赖注入的语法不正确。

它应该是，

.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 
    'account','$timeout','$q','$log', function($scope, task , user, 
     account,$timeout,$q,$log) { 
}])

以下是整个文件的更改。

'use strict';
angular

.module('taskCalendar')
.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account','$timeout','$q','$log', function($scope, task , user, account,$timeout,$q,$log) {


var self = this;

self.simulateQuery = false;
self.isDisabled    = false;

self.repos         = loadAll();
self.querySearch   = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange   = searchTextChange;

// ******************************
// Internal methods
// ******************************

/**
 * Search for repos... use $timeout to simulate
 * remote dataservice call.
 */
function querySearch (query) {
  var results = query ? self.repos.filter( createFilterFor(query) ) : self.repos,
      deferred;
  if (self.simulateQuery) {
    deferred = $q.defer();
    $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
    return deferred.promise;
  } else {
    return results;
  }
}

function searchTextChange(text) {
  $log.info('Text changed to ' + text);
}

function selectedItemChange(item) {
  $log.info('Item changed to ' + JSON.stringify(item));
}

/**
 * Build `components` list of key/value pairs
 */
function loadAll() {
  var repos = [
    {
      'name'      : 'Angular 1',
      'url'       : 'https://github.com/angular/angular.js',
      'watchers'  : '3,623',
      'forks'     : '16,175',
    },
    {
      'name'      : 'Angular 2',
      'url'       : 'https://github.com/angular/angular',
      'watchers'  : '469',
      'forks'     : '760',
    },
    {
      'name'      : 'Angular Material',
      'url'       : 'https://github.com/angular/material',
      'watchers'  : '727',
      'forks'     : '1,241',
    },
    {
      'name'      : 'Bower Material',
      'url'       : 'https://github.com/angular/bower-material',
      'watchers'  : '42',
      'forks'     : '84',
    },
    {
      'name'      : 'Material Start',
      'url'       : 'https://github.com/angular/material-start',
      'watchers'  : '81',
      'forks'     : '303',
    }
  ];
  return repos.map( function (repo) {
    repo.value = repo.name.toLowerCase();
    return repo;
  });
}

/**
 * Create filter function for a query string
 */
function createFilterFor(query) {
  var lowercaseQuery = angular.lowercase(query);

  return function filterFn(item) {
    return (item.value.indexOf(lowercaseQuery) === 0);
  };

}

}

])

Answer 2

检查您是否设置了ng-controller指令。如果没有，那么先设置它。

例如：

<div class="container-fluid"  ng-controller="taskCalendarCtrl as taskCalendarCtrl">

下一步更改

.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account', function($scope, task , user, account) {
    }], taskCalendarCtrl);

到

.controller('taskCalendarCtrl', taskCalendarCtrl);

角度自动完成功能无效

2 个答案: