Question

我正在下拉列表中实现一个带有图像的预先输入问题，当我点击下拉列表中的项目时，它没有被选中。

<body ng-app="TypeaheadDemo">
  <script type="text/ng-template" id="customTemplate.html">
    <a>
      <img ng-src="{{match.model.img}}" width="16"> {{match.model.name}}
    </a>
  </script>

  <div class="container-fluid" ng-controller="TypeaheadCtrl">
    <h1>Angular UI Bootstrap Typeahead</h1>
    <input type="text" ng-model="query" class="form-control" typeahead="name as result.name for result in results | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" />
  </div>
</body>

    angular.module("TypeaheadDemo", ['ui.bootstrap'])
  .controller('TypeaheadCtrl', ['$scope', function($scope) {

    $scope.results = [{
      name: "California",
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png"
    }, {
      name: "Delaware",
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png"
    }, {
      name: "Florida",
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png"
    }];
  }]);

以下是jsfiddle http://jsfiddle.net/pqe3pf89/

的链接

Answer 1

您的表达式构建错误，如果您愿意，可以使用select as但不是这样。您这样做的方式是为您的模型选择任何内容。

要让您的代码正常工作，您可以将表达式更改为下面的代码：它会选择result.name作为ngModel的值，并将按属性{{1}过滤您的列表您使用name <{1}}的{{1}}商品值。

result

Answer 2

@Lenilson de Castro是正确的，但这只会将$scope.query绑定到所选结果的名称属性...即＃34;加利福尼亚＆＃34;，＆＃34;佛罗里达＆＃ 34;，...

如果您想将$scope.query绑定到完整的结果对象，可以使用：

typeahead="result as result.name for result in results | filter:{name: $viewValue}"

Angular Js-为什么单击该值未选中？

2 个答案: