Question

<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代码。上面的代码适用于选择类别中的defind项。现在，如果我为ui-select的ng-model分配一个值，那么当我们选择一个项目时，它不会更新视图。

$scope.content.categories = [action];

上面的代码片段应该更改视图，但不是。请帮我怎么做。

Answer 1

您应该在控制台中未定义action。只需在它周围加上引号。

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

＆＃13;

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

＆＃13;

body {
  padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
  /* Because of the inclusion of Bootstrap */
  height: 29px;
}
.selectize-control > .selectize-dropdown {
  top: 36px;
}

＆＃13;

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

＆＃13;

在ui-select angularjs中更改范围时无法更改视图

1 个答案: