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-爲什麼點擊這個值沒有被選中？

回答

相關問題