CODEWITHSUNDEEP
angularjs
Faizah Pratiwi
Faizah Pratiwi

Reputation: 83

Autocompleted in AngularJS

I want to add autocomplete in my form look like :

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

and my controller is :

$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

}

Now i want to show all the countries except germany and austria but i dont want to delete them in $scope.countries. So how can i make it? Thanks for your help

Upvotes: 0

Views: 47

Answers (1)

Srigar
Srigar

Reputation: 1688

You can use filter to skip the countries dynamically as per best practices. Kindly take look onto this plnkr.co/edit/NqwW45ijaPqTaXDU21NP?p=preview

Html Code:

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

JS File:

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

Additionally added filter to skip the countries..

Updated Code:

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

    })

Upvotes: 1

Related Questions