Question

我有一个表单，我必须显示技能文本字段的建议，我尝试使用ng-repat和列表视图，但我的问题是如果用户点击可用的建议，我需要ng中的值-model，我已经为每个li给了锚标签，但它没有用，请帮助我，提前谢谢。下面是我试过的代码

<!Doctype html>
<html ng-app="myapp">
<head>
<script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
<script type="text/javascript">
var sampleapp = angular.module("myapp", []);
sampleapp.controller("myctrl", function($scope, $http){

$scope.fruits = ['php', 'python', 'perl', 'java', 'javascript', 'ajax', 'servlets', 'html', 'sap', 'sap/abap', 'sap/pico'];

$scope.selectQuasuggestions=function(sid){
    $scope.query = sid;
}
});
</script>
<style type="text/css">
ul
{
background-color: #fff;
width: 12%;
padding: 5px;
margin: 1px;
overflow-y: scroll;
border:1px solid brown;
height: auto;
}
li{
  padding-bottm: 5px;
  line-height:20px;
}
</style>
</head>
<body>
<div ng-controller="myctrl">
<input type="text" ng-model="query" placeholder="enter your skills"/>
<div ng-show="query">
<ul style="list-style-type:none">
<li ng-repeat="fruit in fruits | filter:query"><a href="javascript:void(0);" ng-click="selectQuasuggestions($index);" class="ng-binding"> {{quasuggestionss.name}}</a>{{fruit}}</li>
</ul>
</div>
</div>
</body>
</html>

Answer 1

尝试使用<select>代码

<div ng-show="query">
  <select ng-model="query">
      <option ng-repeat="fruit in fruits | filter:query" class="ng-binding">{{fruit}}</option>
  </select>
</div>

请参阅附件plunker了解 o / p
可能这会对你有所帮助

或
使用ui-bootstrap的 typeahead 属性
检查以下pluncker链接是否为typeahead示例

PLUNCKER

如何在文本框中获取所选的建议值

1 个答案: