Angular Js-为什么单击时未选择该值？
[英]Angular Js- Why on click the value is not selected?
问题描述
I am implementing a typeahead with an image in the dropdown the problem is when i click the item in the dropdown it does not get selected. 
我正在使用下拉列表中的图像实现预输入，问题是当我单击下拉列表中的项目时，它没有被选中。
<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"
}];
}]);
Here is the link to jsfiddle http://jsfiddle.net/pqe3pf89/ 这是jsfiddle的链接http://jsfiddle.net/pqe3pf89/
2 个解决方案
解决方案1
1 已采纳 2016-11-07 19:02:16
Your expression is being built incorrectly, you can use select as if you like but not that way. 您的表达式构建不正确，您可以使用select as就像您喜欢的那样，但不是那样。 The way you are doing so, is selecting nothing to your model. 您这样做的方式是对模型不做任何选择。
To get your code working you can change your expression to look like the code bellow: it will select result.name as the value of your ngModel and will filter your list by the property name of your result item value using the $viewValue . 为了让你的代码工作，你可以改变你的表情看起来像代码波纹管：将选择result.name为你的价值ngModel ，将由物业过滤列表name您的result使用的项目价值$viewValue 。
typeahead="result.name for result in results | filter:{name: $viewValue}"
解决方案2
1 2016-11-07 19:07:06
@Lenilson de Castro is correct, but that will only bind $scope.query to the selected result's name property... that is "California", "Florida", ... @Lenilson de Castro是正确的，但是只会将$scope.query绑定到所选结果的name属性...，即“ California”，“ Florida”，...
If you would like to bind $scope.query to the complete result object, you can use: 如果要将$scope.query绑定到完整的结果对象，可以使用：
typeahead="result as result.name for result in results | filter:{name: $viewValue}"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.