AngularJS「對象」顯示但不是實際模型

我似乎無法在下拉菜單中顯示cause - description，而是顯示[object Object]。選擇它時，我想選擇cause。這怎麼能實現？AngularJS「對象」顯示但不是實際模型

萬一片段無法查看，這裏的plunker：https://plnkr.co/edit/0jXmzfE6lsdTY5anzn9y?p=preview

我的標記：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) { 
 

 

 
\t  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)); 
 
\t \t \t \t 
 
\t \t \t \t \t } 
 
       }); 
 

 

 
});

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

在此先感謝！

來源

2017-05-16 sojim2

的問題在這裏：

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]在下拉列表中。

這是你的工作示例：

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

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

來源

2017-05-16 07:31:30 tanmay

試試這個：

cause.cause for cause in parsedEntries

這工作了我對你的plnkr。

來源

2017-05-16 07:31:30 rrd

uib-typeahead的語法與ngOptions相同。 文檔here（typeahead下拉菜單的自定義彈出模板）。

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

working demo。

來源

2017-05-16 07:32:41 Pengyy

AngularJS「對象」顯示但不是實際模型

回答

相關問題