AngularJS : How to update select option value when ng-click?

Question

I have a Working Select Option with few values which are filtering data for search.

Now i need few links beside as Sidebar which is helpfull to directly click and change the above Select Options

Please refer to this Link Website Link i made.

Login sample :

User : [email protected]

Pass : kishore

http://proconstruct.co.in/jsearch

Javascript :

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

app.controller('MainCtrl', function($scope) {
  var json = {
    "modules":
        <?php echo $qres; ?>
  };

  $scope.ocw = json;

  var allCategories = json.modules.map(function(item) {
    return item.designation
  });
  var filteredCategories = [];

  var allCities = json.modules.map(function(item) {
    return item.city
  });
  var filteredCities = [];


  allCategories.forEach(function(item) {
    if (filteredCategories.indexOf(item) < 0 && item) {
      filteredCategories.push(item);
    }
  });

  allCities.forEach(function(item) {
    if (filteredCities.indexOf(item) < 0 && item) {
      filteredCities.push(item);
    }
  });

  $scope.search = {
    designation: ""
  }
  $scope.search = {
    city: ""
  }

  $scope.categories = filteredCategories;

  $scope.updateFilter = function(value) {
    $scope.search.designation = value;
  }


  $scope.cities = filteredCities;
  $scope.updateFilter = function(value) {
    $scope.search.city = value;
  }

});

These are the links html :

<div  ng-repeat="designation in categories ">
    <a ng-click="updateFilter(search.designation)"> {{designation}}</a>
</div>

This is the Selection which is working and has to react by links :

<select ng-model="search.designation">
    <option value="">All Categories</option>
    <option ng-repeat="category in categories" value="{{category}}">{{category}}</option>
</select>

Tamy · Accepted Answer · 2015-03-24 10:07:25Z

2

From a quick look at your code I would try to change the following:

<div  ng-repeat="designation in categories ">
     <a ng-click="updateFilter(designation)"> {{designation}}</a>
</div>

The only thing I changed is the parameter for the updateFilter function.

[ UPDATE ]

You have also two functions with the same name: updateFilter

Try this as well:

$scope.search = {
    designation: "",
    city: ""
}

$scope.updateFilterDesignation = function(value) {
    $scope.search.designation = value;
}
$scope.updateFilterCity = function(value) {
    $scope.search.city = value;
}

So the link should do: ng-click="updateFilterDesignation(designation)"

This should work hopefully.

edited Mar 24, 2015 at 10:07

answered Mar 24, 2015 at 8:27

Tamy

2031 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yes Webs Over a year ago

Tamy Thankyou very much its is working and can you help me about all results link to show All Categories :)

Tamy Over a year ago

I think that when you click on Show All you need to call ng-click="updateFilterDesignation(null)" to reset $scope.search.designation value.

Yes Webs Over a year ago

Tammy i made that change but it did't work and i have passed even "All Categories" replacing with null . value of select option was changing to All Categories but result not triggering.

Collectives™ on Stack Overflow

AngularJS : How to update select option value when ng-click?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related