Öffnen Sie die Liste auf focus

Arbeite ich mit der angular bootstrap ui (typeahead) versuchen zu zeigen, die Liste meiner Kunden, wenn die Eingänge fokussiert ist, mit diesem:

lima3app.directive('typeaheadOpenOnFocus', function() {
    return {
        require: ['ngModel'],
        link: function(scope, element, attr, ctrls) {
            element.bind('focus', function() {
                ctrls.$setViewValue('');
                console.log('customer.customer');
            });
        }
    };

});

So, in die ich gesetzt mein input:

<input type="text" class="form-content req" id="form-customer"
       name="formcustomer"
       typeahead="customer as customer.customer for customer in customerList | filter:{customer:$viewValue}"
       typeahead-on-select="onCustomerSelect($item)"
       typeahead-append-to-body="true"
       typeahead-open-on-focus

       ng-model="customer.customer"
       focus="true"
       required="required">

Aber der code funktioniert nicht. Gibt es eine Möglichkeit, dies zu tun?

  • Ich bin auch sehr daran interessiert, eine Lösung für dieses. Es scheint unter Diskussion, aber ich bin noch auf der Suche für eine Lösung: github.com/angular-ui/bootstrap/issues/764
  • Hatten Sie kein Glück mit diesem?
  • bitte betrachten Sie die Annahme @JesonMartajaya Antwort, wie es richtig ist.
  • check-out Jeson Lösung.
InformationsquelleAutor Jhonatan Sandoval | 2014-07-02
  1. 4

    Dank @HenryNeo bei der Suche nach den richtigen Attribut, das UI Bootstrap akzeptiert. Der folgende code funktioniert für mich , für angular-ui-Bootstrap-1.3.3.

    Verwenden uib-typeahead aktivieren Sie die dropdown-und typeahead-min-length (ohne uib-) zu ermöglichen, die minLength Attribut.

    <input type="text" typeahead-min-length="0" uib-typeahead="t for t in timeZoneList">
    • Bro, das ist die einfachste Lösung und funktioniert perfekt für mich! Danke!!!
    • Wünschte, ich könnte upvote x10, weil die anderen Antworten sind irreführend oder einfach zu viel Arbeit für so eine einfache Funktion.
    InformationsquelleAutor Jeson Martajaya
  2. 1

    Ich habe jetzt eine funktionierende Lösung. Es gibt 2 neue Richtlinien, die sich das Feld, und öffnen Sie automatisch das typeahead dropdown-Menü.

    Es ist ein funktionierendes Plunker hier.

    app.js

    (function () {
  var secretEmptyKey = '[$empty$]'

  angular.module('plunker', ['ui.bootstrap'])
    .directive('focusMe', function($timeout, $parse) {
      return {
          //scope: true,   //optionally create a child scope
          link: function(scope, element, attrs) {
              var model = $parse(attrs.focusMe);
              scope.$watch(model, function(value) {
                  if(value === true) { 
                      $timeout(function() {
                          element[0].focus();
                      });
                  }
              });
          }
      };
    })
    .directive('emptyTypeahead', function () {
      return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
          //this parser run before typeahead's parser
          modelCtrl.$parsers.unshift(function (inputValue) {
            var value = (inputValue ? inputValue : secretEmptyKey); //replace empty string with secretEmptyKey to bypass typeahead-min-length check
            modelCtrl.$viewValue = value; //this $viewValue must match the inputValue pass to typehead directive
            return value;
          });

          //this parser run after typeahead's parser
          modelCtrl.$parsers.push(function (inputValue) {
            return inputValue === secretEmptyKey ? '' : inputValue; //set the secretEmptyKey back to empty string
          });
        }
      }
    })
    .controller('TypeaheadCtrl', function($scope, $http, $timeout) {
      $scope.selected = undefined;
      $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
      $scope.opened = false;

      $scope.stateComparator = function (state, viewValue) {
        return viewValue === secretEmptyKey || (''+state).toLowerCase().indexOf((''+viewValue).toLowerCase()) > -1;
      };

      $scope.onFocus = function (e) {
        $timeout(function () {
          $(e.target).trigger('input');
        });
      };

      $scope.open = function() {
        $scope.opened = true;
      }
      $scope.close = function() {
        $scope.opened = false;
      }
    });
}());

    HTML-Ansicht

    <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
    <script src="ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div class="container-fluid" ng-controller="TypeaheadCtrl">
      <h4>Typeahead dropdown opens automatically</h4>
      <p>2 directives automatically focus on the field and show the dropdown.

            <br />
        <br />
        <button class="btn btn-default" ng-show="!opened" ng-click="open()">Open Input and show typeahead!</button>
        <button class="btn btn-default" ng-show="opened" ng-click="close()">Close Input</button>
        <br />
        <br />
        <input type="text" focus-me="opened" ng-focus="onFocus($event)" ng-show="opened" ng-trim="false" ng-model="selected" empty-typeahead typeahead="state for state in states | filter:$viewValue:stateComparator" class="form-control" />
        <br />
      </p>
      <pre ng-show="opened">Model: {{selected | json}}</pre>
    </div>
  </body>

</html>

    Diese Lösung wurde gepostet in Antwort auf meine Frage hier:

    Angular JS - Automatisch Fokus-Eingang und zeigt typeahead dropdown - ui.bootstrap.typeahead

    InformationsquelleAutor Holland Risley
  3. 1

    Habe ich eine funktionierende Lösung, indem Sie einige code in ui-bootstrap-tpls-0.10.0.js.
    Es gibt also keine Unterschiede in der typeahead html-markup.

    Können Sie einen Blick hier bei http://plnkr.co/edit/LXHDpL?p=preview.

    Um dieses Update zu verwenden, verwenden Sie die ui-bootstrap-tpls-0.10.0.js von Plunk.
    Zu sehen, wie meine änderungen öffnen ui-bootstrap-tpls-0.10.0.js vom Zupfen und Suche für 'ahneo'.

     1. //minimal no of characters that needs to be entered before typeahead
    kicks-in
    //ahneo :: before
    //var minSearch = originalScope.$eval(attrs.typeaheadMinLength) || 1;
    //ahneo :: after (changed minimal no of characters to 0 by default)
    var minSearch = originalScope.$eval(attrs.typeaheadMinLength) || 0;
 2. //ahneo :: new (set input value to empty string if it contains " " string value)
    if (inputValue === ' ') {
        inputValue = '';
        modelCtrl.$setViewValue('');
    }  
 3. //ahneo :: before
    //if (inputValue && inputValue.length >= minSearch) {
    //ahneo :: after (add new condition to get matches for min search = 0)
    if (minSearch === 0 || inputValue && inputValue.length >= minSearch) {
 4. //ahneo :: new (bind element to focus event to trigger modelCtrl.$parsers.unshift method)
    element.bind('focus', function (evt) {
        if (modelCtrl.$viewValue === '') {
            modelCtrl.$setViewValue(' ');
        }
    });

    Hoffe, das hilft

    InformationsquelleAutor Henry Neo
  4. -1

    Können Sie festlegen, anzeigen Wert $setViewValue und binden click und blur-events

    directive('emptyTypeahead', function() {
return {
    require: 'ngModel',
    link: function(scope, element, attributes, control) {
      element.bind('click', function() {
        control.$setViewValue(' ');
      });
      element.bind('blur', function() {
        control.$setViewValue('');
      });
    }
  };
})
    InformationsquelleAutor Sarthak
Schreibe einen Kommentar