角度:从 ng 重复搜索结果中选择项目

Question

是否可以从ng重复搜索结果中选择一个结果，它会自动进入输入区域？

<input type="text" class="form-control"  ng-model="event.url_code" ng-change="searchAccountUrl();">
<div ng-repeat="result in accounts | filter: event.url_code" style="border: 1px solid #dee3e8">
<a style="cursor: pointer">{{result.url_code}}</a>
</div>
</div>

喜欢 Angucomplete？ 或选择标签，您选择一个选项，它就会作为选定进入输入区域。 然后 ng-model = 您的选择

Answer 1

如果它们与input中的值匹配，您只希望显示ng-repeat中的一个(或几个(<div>？

您只需要将ng-if与ng-repeat一起使用即可。ng-if将了解ng-repeat迭代中的当前项，如果它与输入共享范围，则它还将了解您用于ng-model的模型。 无需更改处理程序等。 数据绑定将为您完成所有这些工作。

<input ng-model="myModel.url_code">
<div ng-repeat="result in accounts" ng-if="result.url_code == myModel.url_code">
<strong>{{result.url_code}}</strong>
</div>

如果您想担心部分匹配，您可以使用.contains()之类的方法代替==。 只需将该方法添加到您的范围，它就会起作用。

编辑：根据您的评论，您想要以下内容：

<input ng-model="myModel.url_code">
<a href="" ng-click="setInputValue(result)" ng-repeat="result in accounts">{{result.url_code}}</a>
$scope.setInputValue = function(result) {
$scope.myModel.url_code = result.url_code;
};

Answer 2

使用 ng-click 指令，该指令将要插入的字符串传递到输入中。

.JS：

$scope.input = null;
$scope.replaceInput = function(e) {
$scope.input = angular.element(e.srcElement).html());
}

.HTML：

<input type="text" ng-model="input">
<div ng-repeat="foo in foos">
<div ng-click="replaceInput($event)">{{foo.baa}}</a>
</div>