在AngularJS中自动完成

时间:2017-04-10 09:51:07

标签: angularjs

我想在表单中添加自动填充功能,如下所示:

<md-autocomplete required
     md-input-name="pekerjaan"  
     md-selected-item="selectedCountry"
     md-search-text="searchCountry"
     md-items="item in query"
     md-dropdown-position="bottom"
     md-floating-label="Pekerjaan">

我的控制器是:

$scope.countries = [ "Albania","Andorra","Armenia","Austria","Azerbaijan","Belarus",
                    "Belgium","Bosnia & Herzegovina","Bulgaria","Croatia","Cyprus",
                    "Czech Republic","Denmark","Estonia","Finland","France","Georgia",
                    "Germany","Greece","Hungary","Iceland","Ireland","Italy","Kosovo",
                    "Latvia","Liechtenstein","Lithuania","Luxembourg","Macedonia","Malta",
                    "Moldova","Monaco","Montenegro","Netherlands","Norway","Poland",
                    "Portugal","Romania","Russia","San Marino","Serbia","Slovakia","Slovenia",
                    "Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];

$scope.query = function(){

    $scope.countries

}

现在我想展示除德国和奥地利以外的所有国家,但我不想在$ scope.countries中删除它们。那我该怎么做呢?谢谢你的帮助

1 个答案:

答案 0 :(得分:1)

您可以根据最佳做法使用过滤器动态跳过国家/地区。请查看此plnkr.co/edit/NqwW45ijaPqTaXDU21NP?p=preview

Html代码:

 <div class="col-sm-5 hidden-xs">
       <div ng-repeat="country in countries | skipValues:skipCountries">{{country}}</div>
    </div>

JS文件:

var app = angular.module('plunker', []);

app.controller('MainCtrl',function($scope){

    $scope.skipCountries = ["Germany","Austria"];
    $scope.countries = [ "Albania","Andorra","Armenia","Austria","Azerbaijan","Belarus",
                    "Belgium","Bosnia & Herzegovina","Bulgaria","Croatia","Cyprus",
                    "Czech Republic","Denmark","Estonia","Finland","France","Georgia",
                    "Germany","Greece","Hungary","Iceland","Ireland","Italy","Kosovo",
                    "Latvia","Liechtenstein","Lithuania","Luxembourg","Macedonia","Malta",
                    "Moldova","Monaco","Montenegro","Netherlands","Norway","Poland",
                    "Portugal","Romania","Russia","San Marino","Serbia","Slovakia","Slovenia",
                    "Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];

})

app.filter('skipValues', function($filter) {
  return function(items, values) {
    return $filter('filter')(items, function(obj) {
      return values.indexOf(obj) == -1;
    })
  };
});

另外添加过滤器以跳过国家..

更新代码:

app.controller('MainCtrl',function($scope){

        $scope.skipCountries = ["Germany","Austria"];
        $scope.countries = [ "Albania","Andorra","Armenia","Austria","Azerbaijan","Belarus",
                        "Belgium","Bosnia & Herzegovina","Bulgaria","Croatia","Cyprus",
                        "Czech Republic","Denmark","Estonia","Finland","France","Georgia",
                        "Germany","Greece","Hungary","Iceland","Ireland","Italy","Kosovo",
                        "Latvia","Liechtenstein","Lithuania","Luxembourg","Macedonia","Malta",
                        "Moldova","Monaco","Montenegro","Netherlands","Norway","Poland",
                        "Portugal","Romania","Russia","San Marino","Serbia","Slovakia","Slovenia",
                        "Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];

     $scope.query= function() {
       return $filter('filter')($scope.countries, function(obj) {
          return $scope.skipCountries.indexOf(obj) == -1;
       })
     };

    })