Question

我在Angular中查看demo for select-ui，奇怪的是当我在项目中使用相同的代码时，ui-select并没有显示任何值！经过深入和长时间的搜索，我发现演示（正在运行）使用的是角度1.2.18，而我使用的是1.6.5的最新版本。

以下是代码：

demo.js

var app = angular.module('demo', ['ngSanitize', 'ui.select']);
app.controller('DemoCtrl', function($scope) {

  $scope.person = {};

  $scope.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
  ];

});

demo.html

<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
  <meta charset="utf-8">
  <title>AngularJS ui-select</title>


  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">

  <script src="select.js"></script>
  <link rel="stylesheet" href="select.css">

  <script src="demo.js"></script>

<body ng-controller="DemoCtrl">

  <p>Selected: {{person.selectedSingleKey}}</p>
  <ui-select ng-model="person.selectedSingleKey" title="Choose a person">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.value.name}}</ui-select-match>
    <ui-select-choices repeat="person.key as (key, person) in people | filter: {'value':$select.search}">
      <div ng-bind-html="person.value.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>

</body>
</html>

如果我切换到可用的最新Angular版本，它会停止工作而不会出现任何错误，请您帮忙告诉我原因？

Answer 1

简短回答：该示例使用ui-select版本0.13.x，您可以从包含的select.js文件的内容中看到

/*!
 * ui-select
 * http://github.com/angular-ui/ui-select
 * Version: 0.13.x - 2015-09-28T02:22:34.935Z
 * License: MIT
 */

通过查看changelog，我们可以注意到仅在ui-select 0.14.2中添加了对Angularjs 1.5.x的支持 - 因此我将排除支持Angular 1.6.x的版本0.13.x。

如果您确实更新了链接的plunker，以便它使用当前版本的ui-select，那么一切都会重新开始。

示例（简化）：

http://plnkr.co/edit/6IyPS8e8mTDVLQgZYByN?p=preview

注意：
由于创建该问题的原始用户后来添加了他已经修复了引用的库版本，我正在添加一些关于该问题的更多见解。根据评论，用户表示：

谢谢，但我已经在我的项目中使用了最新的select-ui，通过从ui-select-choices标记中删除过滤器：{'value'：$ select.search}来解决问题！

所以问题实际上是在过滤器语法上。问题中引用的示例是原始plunker中的第三个片段，“使用键进行绑定”。

为了让该示例使用最新的Angularjs 1.6.x版本并仍支持过滤器，我不得不将示例更改为：

<h2>Using key for binding</h2> <p>Selected: {{person.selectedSingleKey}}</p> <ui-select ng-model="person.selectedSingleKey" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person"> <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.value.name}}</ui-select-match> <ui-select-choices repeat="person.key as (key, person) in peopleObj | filter: $select.search"> <div ng-bind-html="person.value.name | highlight: $select.search"></div> <small> email: {{person.value.email}} age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span> </small> </ui-select-choices> </ui-select>

注意过滤器如何更改为filter: $select.search。我假设问题是由Angularjs过滤器的实现发生变化引起的。无论哪种方式，我在更新的plunker中使用的语法通过允许在person对象上按名称，年龄，电子邮件等进行过滤来正常工作，因此如果您需要过滤器，我只会使用它。

另请注意，该示例似乎包含一个显然实际上未使用的自定义属性过滤器指令“propsFilter”。

我更新了链接的plunker以包含原始问题中的特定样本。

angular select-ui不显示最新角度版本的值

1 个答案: