Question

我似乎无法在下拉列表中显示cause - description，而是显示[object Object]。我希望只在选中cause时选择它。怎么能实现这一目标？

如果无法查看该代码段，请访问以下内容：google docs

我的加价：

＆＃13;

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {


	    var url = 'https://spreadsheets.google.com/feeds/list/1O7M5gaEGlyE5gkOBARJrxJJMBYiTwz2THVjgbaTx9v8/od6/public/values?alt=json';
            var parse = function (entry) {
                console.log(entry);
                var description = entry.gsx$description.$t;
                var cause = entry.gsx$cause.$t;
                return {

                    description: description,
                    cause: cause
                };
            };
            $http.get(url)
                .then(function (response) {
                    var entries = response.data.feed.entry;

                    $scope.parsedEntries = [];
                    for (var key in entries) {
                        var content = entries[key];
                        $scope.parsedEntries.push(parse(content));
				
					}
                });


});

＆＃13;

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>




<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">

    <h4>Static arrays</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" ng-model="selected" typeahead-editable="false" uib-typeahead="cause for cause in parsedEntries | filter:$viewValue | limitTo:8" class="form-control">

</div>
  </body>
</html>

＆＃13;

提前致谢！

Answer 1

问题在于：

uib-typeahead="cause for cause in parsedEntries..."

由于这遵循ng-options种语法，你应该有

uib-typeahead="cause as cause.cause for cause in parsedEntries.."

因为此处cause是包含description和cause的完整对象。如果你想阅读这个语法，那就是value as label for collection但是在你的情况下，既然你没有为label提供任何东西，它就是整个对象，因此[object Object]在下拉列表中。

以下是您的工作示例：

＆＃13;

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {
  var url = 'https://spreadsheets.google.com/feeds/list/1O7M5gaEGlyE5gkOBARJrxJJMBYiTwz2THVjgbaTx9v8/od6/public/values?alt=json';
  var parse = function(entry) {
    var description = entry.gsx$description.$t;
    var cause = entry.gsx$cause.$t;
    return {
      description: description,
      cause: cause
    };
  };
  $http.get(url)
    .then(function(response) {
      var entries = response.data.feed.entry;

      $scope.parsedEntries = [];
      for (var key in entries) {
        var content = entries[key];
        $scope.parsedEntries.push(parse(content));
      }
    });
});

＆＃13;

<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">

    <h4>Static arrays</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" ng-model="selected" typeahead-editable="false" uib-typeahead="cause as cause.cause for cause in parsedEntries | filter:$viewValue | limitTo:8" class="form-control">

  </div>
</body>

</html>

＆＃13;

Answer 2

请改为尝试：

cause.cause for cause in parsedEntries

这对你的plnkr有用。

Answer 3

uib-typeahead的语法与ngOptions相同。 文档here （用于预先输入＆＃39; s下拉列表的自定义弹出式模板）。

// value as text for item in items
cause as cause.description for cause in parsedEntries

<强> working demo

AngularJS＆＃34;对象＆＃34;显示但不是实际模型

3 个答案: