Angular Js-为什么点击这个值没有被选中？

我在下拉菜单中实现了一个带有图像的提前式问题，当我点击下拉菜单中的项目时，它没有被选中。Angular Js-为什么点击这个值没有被选中？

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

来源

2016-11-07 Usman Iqbal

你的表达正在修建错误，你可以使用select as如果你喜欢的链接，但不是这样的。你这样做的方式是没有选择你的模型。

为了让你的代码工作，你可以改变你的表情看起来像波纹管代码：它将选择result.name为您ngModel的价值，并将通过$viewValue您result项目价值的财产name过滤列表。

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

来源

2016-11-07 19:02:16

@Lenilson德卡斯特罗是正确的，但只结合$scope.query到选定的结果的名称属性...这是“加州”，“佛罗里达”，...

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

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

来源

2016-11-07 19:07:06 GPicazo

Angular Js-为什么点击这个值没有被选中？

回答

相关问题