Question

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

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

正如您所看到的，我没有将任何默认国家/地区作为输出。有没有办法做到这一点？

enter image description here

Answer 1

为SearchText分配默认值＆amp; selectedItem对象。

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

Answer 2

我用超时来做这件事。

$.getJSON('json/data.json', function(data){
    $.each(data, function(key, val){
        var items=[];
        $.each(val, function(keyItem, valItem){
            items.push('<td>'+valItem+'</td>');
        });
        $('<tr/>', {html: items.join('')}).appendTo('.table tbody');
    });
});

Answer 3

我用自动填充和默认值写小codepen。你必须做什么：

Init主模型。
定义模型字段，用于自动填充md-selected-item属性。
定义用于加载自动填充项目的回调。
从关联字段保存主模型提取ID（或其他字段）之前。

代码中的主要错误：

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

＆＃13;

(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));

＆＃13;

<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>

＆＃13;

Answer 4

我知道这是一个老问题，但有些人可能会从我的解决方案中受益。我努力解决自动完成异步模型的问题，并将自动复合作为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;
        }
    });


};

}）;

这将检查引用的变化[＆＃34; Scope＆＃34; + i]（因为最初它将为null）并创建一个初始选择的项目并设置自动复合词＆＃39;选定的项目到该对象。然后它将初始化值设置为true，以便再也不会发生这种情况。

给默认值md-autocomplete

4 个答案: