给 md-autocomplete 默认值

Question

如何在 md-autocomplete 中传递默认值？

图片 1：HTML 代码图片 2：JS 代码图 3：输出

如您所见，我没有将任何默认国家/地区作为输出。有什么办法吗？

Answer 1

为 yr SearchText 指定默认值，为 selectedItem 指定对象。

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

Answer 2

我用超时来做这个。

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

Answer 3

我写的小 codepen 具有自动完成和默认值。你必须做什么：

初始化主模型。
定义模型字段，用于自动完成 md-selected-item 属性.
定义加载自动完成项目的回调。
在保存主模型之前，从关联字段中提取 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>

Answer 4

我知道这是一个老问题，但有些人可能会从我的解决方案中受益。我一直在努力解决 auto-complete 异步模型的问题，并将我的自动完成作为 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，这样就不会再发生这种情况。

给 md-autocomplete 默认值

give default value to md-autocomplete

angular-material