Geek Answers Handbook

Specify default value for md-autocomplete

How to pass default value in md-autocomplete?

Image 1: HTML code Image 2: JS code Image 3: Exit

As you can see, I do not get any default country as an output. Is there any way to do this?

enter image description hereenter image description hereenter image description here

+4
source share
4 answers

I used a timeout for this.

$timeout(function() {
        $scope.local = {selectedItem : 1}
    }, 2000);
+1
source

Set yT SearchText to default and selectedItem object.

$scope.local ={
     ...
     searchText : 'Default Value',
     selectedItem : 'Default object'
     ...
}
0
source

codepen . :

  • .
  • , autocomplete md-selected-item.
  • .
  • , extract id ( ) .

:

$scope.local = {
    ...
    selectedItem: 1, // Must be object, but not integer
    ...
}


(function(A) {
  "use strict";

  var app = A.module('app', ['ngMaterial']);

  function main(
    $q,
    $scope,
    $timeout
  ) {
    $timeout(function() {
      $scope.user = {
        firstname: "Maxim",
        lastname: "Dunaevsky",
        group: {
          id: 1,
          title: "Administrator"
        }
      };
    }, 500);

    $scope.loadGroups = function(filterText) {
      var d = $q.defer(),
        allItems = [{
          id: 1,
          title: 'Administrator'
        }, {
          id: 2,
          title: 'Manager'
        }, {
          id: 3,
          title: 'Moderator'
        }, {
          id: 4,
          title: 'VIP-User'
        }, {
          id: 5,
          title: 'Standard user'
        }];

      $timeout(function() {
        var items = [];

        A.forEach(allItems, function(item) {
          if (item.title.indexOf(filterText) > -1) {
            items.push(item);
          }
        });

        d.resolve(items);
      }, 1000);

      return d.promise;
    };
  }

  main.$inject = [
    '$q',
    '$scope',
    '$timeout'
  ];

  app.controller('Main', main);
}(this.angular));
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.js"></script>

</head>

<body ng-app="app" flex layout="column" layout-margin ng-controller="Main">
  <md-content layout="column" class="md-whiteframe-z1" layout-margin>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h3>Form</h3>
      </div>
    </md-toolbar>
    <md-content class="md-whiteframe-z1">
      <div class="md-padding">
        <md-input-container>
          <label for="firstname">First name</label>
          <input type="text" name="firstname" ng-model="user.firstname" />
        </md-input-container>
        <md-input-container>
          <label for="lastname">Last name</label>
          <input type="text" name="lastname" ng-model="user.lastname" />
        </md-input-container>
        <md-autocomplete md-selected-item="user.group" md-items="item in loadGroups(filterText)" md-item-text="item.title" md-search-text="filterText">
          <md-item-template>{{ item.title }}</md-item-template>
          <md-not-found>No items.</md-not-found>
        </md-autocomplete>
      </div>
    </md-content>
  </md-content>
  <md-content class="md-whiteframe-z1" layout-margin>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h3>Model as JSON</h3>
      </div>
    </md-toolbar>
    <md-content class="md-padding">
      <p>
        {{ user | json }}
      </p>
    </md-content>
  </md-content>
</body>
Hide result
0

, , . , ng-repeat. , , .

, , .

:

<md-autocomplete initscope='{{quote["Scope"+i]}}' ng-repeat='i in [1,2,3,4,5,6,7,8]'

                    class='m-1'  
                    md-selected-item="ScopeSelected" 
                    md-clear-button="true"
                    md-dropdown-position="top" 
                    md-search-text="pScopeSearch" 
                    md-selected-item-change='selectPScope(item.label,i)'
                    md-items="item in scopePSearch(pScopeSearch,i)"
                    md-item-text="item.label"  
                    placeholder="Plowing Scope {{i}}"                      
                    md-min-length="3"                      
                    md-menu-class="autocomplete-custom-template"

            >

:

Details.directive('initscope', function () {
return function (scope, element, attrs) {

    scope.$watch(function (){
        return attrs.initscope;
    }, function (value, oldValue) {
        //console.log(attrs.initscope)
        if(oldValue=="" && value!="" && !scope.initialized){
        //console.log(attrs.initscope);
            var item = {id:0, order:0,label:attrs.initscope?attrs.initscope:"" }
            scope.ScopeSelected = item;
            scope.initialized = true;
        }
    });


};

});

[ "Scope" + i] ( ) . true, .

0
source

More articles:


All Articles