AngularJS $表不绑定对象工作

Question

我想实现像这里一样的行为 Angular Material md-select Displaying quantity selected （在多计数选定项选择） 但它不工作，这是我的代码和小提琴：

<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/ 在此先感谢您。

Answer 1

你应该使用完全相同的手表用相同$scope变量，它应该只是selectedToppings

也应该是

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

，而不是

$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