Question

对于角度下拉，我在下拉列表中选择了值和描述，但是当选择该值时，我只想选择主值（原因）。如何实现这一目标？

＆＃13;

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  var _selected;

  $scope.selected = undefined;



  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.ready = true;
      $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 as cause.cause + ' - ' + cause.description for cause in parsedEntries | filter:$viewValue | limitTo:8" class="form-control">

    </div>
  </body>
</html>

＆＃13;

如果代码段不起作用，请访问以下内容：https://plnkr.co/edit/aJzQCdX0izh5SnkJVgW3?p=preview

Answer 1

将typeahead-on-select="onChange()"添加到您的指令中：

<input type="text" typeahead-on-select="onChange()" ng-model="selected" typeahead-editable="false" uib-typeahead="cause as cause.cause + ' - ' + cause.description for cause in parsedEntries | filter:$viewValue | limitTo:8" class="form-control">

并在更改处理程序中获取cause属性：

$scope.onChange = function() {
  console.log($scope.selected.cause); 
}

AngularJS如何获取选定值而不是选择值的描述？

1 个答案: