AngularJS $watch does not work with bind object

Question

I would like to implement the same behaviour like here Angular Material md-select Displaying quantity selected (counting selected items in a multiple select ) But it does not work, here is my code and fiddle :

<div ng-app="selectDemoOptGroups" ng-controller="SelectOptGroupController" >
    <md-select md-selected-text="selectedText" ng-model="selectedToppings"  multiple>   
        <md-option ng-value="topping.name" ng-repeat="topping in toppings">{{topping.name}}</md-option>
    </md-select>
</div>


.module('selectDemoOptGroups', ['ngMaterial'])
.controller('SelectOptGroupController', function($scope) {

  $scope.toppings = [
    { category: 'meat', name: 'Pepperoni' },
    { category: 'meat', name: 'Sausage' },
    { category: 'meat', name: 'Ground Beef' },
    { category: 'meat', name: 'Bacon' },
    { category: 'veg', name: 'Mushrooms' },
    { category: 'veg', name: 'Onion' },
    { category: 'veg', name: 'Green Pepper' },
    { category: 'veg', name: 'Green Olives' }
  ];
  $scope.selectedToppings = [];       

  $scope.$watch("$scope.selectedToppings.length", function() {
      if ($scope.selectedToppings.length > 0){
            $scope.selectedText = $scope.selectedModel.length + " selected";
      }
      else {
            $scope.selectedText = "Toppings";
      }
  },true);
});

https://jsfiddle.net/AlexLavriv/ya6eu8kz/2/ Thank you in advance.

Sajeetharan · Accepted Answer · 2017-08-27 04:29:24Z

3

You should use exactly the same $scope variable for watch, it should be just selectedToppings

also it should be

 $scope.selectedText = $scope.selectedToppings + " selected";

instead of

$scope.selectedModel.length + " selected";

CODE

  $scope.$watch("selectedToppings", function() {
       if ($scope.selectedToppings.length > 0){
          $scope.selectedText = $scope.selectedToppings + " selected";
        }
       else{
          $scope.selectedText = "Toppings";
       }
    },true);

WORKING FIDDLE

edited Aug 27, 2017 at 4:29

answered Aug 27, 2017 at 4:17

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Sajeetharan Over a year ago

did you check the demo?

Sajeetharan Over a year ago

you need to change this line as well $scope.selectedText = $scope.selectedModel.length + " selected"; as mentioned above

Collectives™ on Stack Overflow

AngularJS $watch does not work with bind object

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related