Angularjs 角度选择ui不显示最新角度版本的值_Angularjs

Angularjs 角度选择ui不显示最新角度版本的值

angularjs

Angularjs 角度选择ui不显示最新角度版本的值,angularjs,Angularjs,我从一个角度来看，奇怪的是，当我在我的项目中使用相同的代码时，ui选择没有显示任何值！经过长时间的深入搜索，我发现正在运行的演示使用的是angular 1.2.18，而我使用的是最新版本1.6.5 代码如下： demo.js var app = angular.module('demo', ['ngSanitize', 'ui.select']); app.controller('DemoCtrl', function($scope) { $scope.person = {}; $s

我从一个角度来看，奇怪的是，当我在我的项目中使用相同的代码时，ui选择没有显示任何值！经过长时间的深入搜索，我发现正在运行的演示使用的是angular 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版本，它将停止工作而不会出现任何错误，您能告诉我原因吗？

简短回答：该示例使用ui select version 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
 */

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

如果您确实更新了链接的plunker，使其使用当前版本的ui select，那么一切都会重新开始工作

简化示例：

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

谢谢，但是我的项目上已经有了最新的select ui，通过从ui select choices标签中删除过滤器：{'value'：$select.search}解决了这个问题

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

为了使该示例能够与最新的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，以包含原始问题中的特定示例。

请确切说明AngularJS版本失败的原因？我在上面说过，我正在使用angular 1.6.5，但它失败了，这不是你所问的吗？发布一个适用于1.2.18的代码片段，以便我们可以看到如何升级到1.6.5谢谢，但是我的项目上已经有了最新的select ui，通过从ui select choices标签中删除过滤器：{'value'：$select.search}解决了这个问题！