在ui-select angularjs中，当作用域改变时，无法改变视图

Unable to change view when scope gets changed in ui-select angularjs

本文关键字：改变 视图 ui-select angularjs 作用域      更新时间：2023-09-26
<ui-select multiple  ng-model="content.categories"  theme="bootstrap"name="category" on-select="isCategorySelected()" >
       <ui-select-match placeholder="Select Category"> 
          {{ $item.label }} 
       </ui-select-match>
             <ui-select-choices repeat="category.value as category in categories | filter: {label: $select.search}">
                    <div ng-bind-html="category.label | highlight: $select.search"></div>
             </ui-select-choices>
 </ui-select>
这是我的html代码 
  $scope.categories = [
    { label: 'Action', value: 'action' },
    { label: 'Adventure', value: 'adventure' },
    { label: 'Comedy', value: 'comedy' },
    { label: 'Crime', value: 'crime' },
    { label: 'Faction', value: 'faction' },
    { label: 'Fantasy', value: 'fantasy' },
    { label: 'Historical', value: 'historical' },
    { label: 'Horror', value: 'horror' },
    { label: 'Mystery', value: 'mystery' },
    { label: 'Paranoid', value: 'paranoid' },
    { label: 'Philosophical', value: 'philosophical' },
    { label: 'Political', value: 'political' },
    { label: 'Realistic', value: 'realistic' },
    { label: 'Romance', value: 'romance' },
    { label: 'Saga', value: 'saga' },
    { label: 'Satire', value: 'satire' },
    { label: 'Science fiction', value: 'sciencefiction' },
    { label: 'Slice of Life', value: 'sliceoflife' },
    { label: 'Speculative', value: 'speculative' },
    { label: 'Thriller', value: 'thriller' },
    { label: 'Urban', value: 'urban' }
];

这是我的javascript代码。上面的代码可以很好地选择类别中的定义项。现在，如果我给ui-select的ng-model赋值它不会在我们选择项目时更新视图

$scope.content.categories = [action];
上面的代码片段

应该改变视图，但它没有。请告诉我怎么做。

您应该得到action未在控制台中定义。用引号括起来。

$scope.content.categories = ['action'];


var app = angular.module('app', ['ui.select', 'ngSanitize']);
app.controller('myController', function($scope) {
  $scope.content = {};
  $scope.content.categories = ['action'];
  $scope.setAdventure = function() {
    $scope.content.categories = ['adventure'];
  };
  $scope.pushComedy = function() {
    if ($scope.content.categories.indexOf('comedy') === -1) {
      $scope.content.categories.push('comedy');
    }
  };
  $scope.categories = [{
    label: 'Action',
    value: 'action'
  }, {
    label: 'Adventure',
    value: 'adventure'
  }, {
    label: 'Comedy',
    value: 'comedy'
  }, {
    label: 'Crime',
    value: 'crime'
  }, {
    label: 'Faction',
    value: 'faction'
  }, {
    label: 'Fantasy',
    value: 'fantasy'
  }, {
    label: 'Historical',
    value: 'historical'
  }, {
    label: 'Horror',
    value: 'horror'
  }, {
    label: 'Mystery',
    value: 'mystery'
  }, {
    label: 'Paranoid',
    value: 'paranoid'
  }, {
    label: 'Philosophical',
    value: 'philosophical'
  }, {
    label: 'Political',
    value: 'political'
  }, {
    label: 'Realistic',
    value: 'realistic'
  }, {
    label: 'Romance',
    value: 'romance'
  }, {
    label: 'Saga',
    value: 'saga'
  }, {
    label: 'Satire',
    value: 'satire'
  }, {
    label: 'Science fiction',
    value: 'sciencefiction'
  }, {
    label: 'Slice of Life',
    value: 'sliceoflife'
  }, {
    label: 'Speculative',
    value: 'speculative'
  }, {
    label: 'Thriller',
    value: 'thriller'
  }, {
    label: 'Urban',
    value: 'urban'
  }];
});
body {
  padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
  /* Because of the inclusion of Bootstrap */
  height: 29px;
}
.selectize-control > .selectize-dropdown {
  top: 36px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.12.0/select.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.12.0/select.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
<div ng-app='app' ng-controller='myController'>
  <button ng-click="setAdventure()">setAdventure</button>
  <button ng-click="pushComedy()">pushComedy</button>
  {{ content.categories }}
  <ui-select multiple ng-model="content.categories" theme="bootstrap" name="category" on-select="isCategorySelected()" style="width: 300px;">
    <ui-select-match placeholder="Select Category">
      {{ $item.label }}
    </ui-select-match>
    <ui-select-choices repeat="category.value as category in categories | filter: {label: $select.search}">
      <div ng-bind-html="category.label | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
</div>

相关文章：