代码之家  ›  专栏  ›  技术社区  ›  mhatch

如何从ui select on change事件获取搜索值

  •  0
  • mhatch  · 技术社区  · 6 年前

    我试图捕获并调用 ui-select ui-select-match 元素。

    正常情况下 input 元素,我可以这样做:

    // controller
    class selectController {
      constructor($scope) {
        this.$scope = $scope;
        this.query = '';
        this.numChars = 0;
    
      countChars(q) {
        this.query = q;
        this.numChars = q.length;
      }
    }
    
    // template
    <input ng-model="q" ng-change="ctrl.countChars(q)">...</input>
    

    onchange 事件。

    例如:

    // controller
    class selectController {
      constructor($scope) {
        this.$scope = $scope;
        this.query = '';
        this.numChars = 0;
        this.advisor = {};
        this.advisors = [
          { name: 'Cheryl Aubuchon' },
          { name: 'Jerome Brown' },
          { name: 'John Doe' },
          { name: 'Jane Doe' },
          { name: 'Deborah Grimm' },
          { name: 'Tommy Harris' },
          { name: 'Sally Smith' },
          { name: 'Harry Velez' },
          { name: 'Chelsie Williamson' }
        ];
      }
    
      countChars(q) {
        this.query = q;
        this.numChars = q.length;
      }
    }
    
    // template
    <p ng-bind="ctrl.query"></p>
    
    <ui-select ng-model="ctrl.advisor.selected">
        <ui-select-match allow-clear placeholder="Select an Advisor" class="ui-select-match" ng-model="q" ng-change="ctrl.countChars(q)">
            <span ng-bind="$select.selected.name"></span>
        </ui-select-match>
        <ui-select-choices class="ui-select-choices" repeat="advisor in (ctrl.advisors | filter: $select.search)">
            <span ng-bind="advisor.name"></span>
        </ui-select-choices>
    </ui-select>
    

    如何在用户键入搜索查询时捕获该查询并在控制器中对其执行操作?

    1 回复  |  直到 6 年前
        1
  •  1
  •   mhatch    6 年前

    refresh refresh-delay ui-select-choices

    // controller
    class selectController {
      constructor($scope) {
        this.$scope = $scope;
        this.query = '';
        this.numChars = 0;
        this.advisor = {};
        this.advisors = [
          { name: 'Cheryl Aubuchon' },
          { name: 'Jerome Brown' },
          { name: 'John Doe' },
          { name: 'Jane Doe' },
          { name: 'Deborah Grimm' },
          { name: 'Tommy Harris' },
          { name: 'Sally Smith' },
          { name: 'Harry Velez' },
          { name: 'Chelsie Williamson' }
        ];
      }
    
      countChars(q) {
        this.query = q;
        this.numChars = q.length;
      }
    }
    
    // template
    <p ng-bind="ctrl.query"></p>
    
    <ui-select ng-model="ctrl.advisor.selected">
        <ui-select-match allow-clear placeholder="Select an Advisor" class="ui-select-match">
            <span ng-bind="$select.selected.name"></span>
        </ui-select-match>
        <ui-select-choices class="ui-select-choices" repeat="advisor in (ctrl.advisors | filter: $select.search)" refresh="ctrl.countChars($select.search)" refresh-delay="0">
            <span ng-bind="advisor.name"></span>
        </ui-select-choices>
    </ui-select>