“`ng blur`”
“`ng blur`”
提问于 2016-08-25 05:15:16
在角应用程序中，对于搜索字段，我使用来自控制器的过滤器函数。它工作得很好，但是我无法用当前的模型实现ng-blur。
我不知道为什么这不管用，有人帮我吗？
同时，我在两个单独的行中显示数据(根据客户请求)，请评估我的显示方法，如果有人知道更好的方法，请告诉我。
使用“模糊”时，单击“列表无所选”：
<div class="child">
<input type="text" ng-model="search"
ng-focus="isDropDown = true"
ng-blur="isDropDown = false" //nothing selected if blur exist
ng-keyup="village='';isDropDown = true"
>这是我的代码：
html：
<div class="parent" >
<div class="child">
<input type="text" ng-model="search"
ng-focus="isDropDown = true"
ng-keyup="village='';isDropDown = true"
>
<span>{{village | uppercase }}</span>
</div>
<table ng-show="isDropDown" ng-mouseleave="isDropDown = false">
<tbody>
<tr ng-repeat="item in items" ng-click="select(item);">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>Js部分：
$scope.items2 = $scope.items;
$scope.isDropDown = false;
$scope.$watch('search', function(val) {
$scope.items = $filter('filter')($scope.items2, val);
});
$scope.select = function(item) {
$scope.isDropDown=false; // how to put this in inline? ( html )
$scope.search = item.name;
$scope.village = item.village;
}现场演示
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-25 06:08:12
移除手表，您可以使用filter和blur来防止单击事件，因此在单击时禁用。
溶液
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $filter) {
$scope.items = [{
id: 1,
name: 'John',
village: 'kongambattu'
}, {
id: 2,
name: 'Steve',
village: 'Serivanthadu'
}, {
id: 3,
name: 'Joey',
village: 'moolapakkam'
}, {
id: 4,
name: 'Mary',
village: 'Sooramangalam'
}, {
id: 5,
name: 'Marylin',
village: 'Kariyamanikkam'
}, {
id: 6,
name: 'Arif',
village: 'madukarai'
}
];
$scope.items2 = $scope.items;
$scope.isDropDown = false;
$scope.select = function(item) {
$scope.isDropDown=false; // how to put this in inline? ( html )
$scope.search = item.name;
$scope.village = item.village;
};
});.parent{
width:15em;
border:1px solid gray;
position:relative;
}
.parent span{
display: block;
font-size: 0.75em;
padding:0.5em;
}
.parent input{
width:100%;
padding:0.5em;
margin:0;
box-sizing:border-box;
border:0;
outline: none;
}
table{
border:1px solid red;
width:100%;
position: absolute;
top:3.1em;
border-collapse:collapse;
}
table tr td{
padding:0.5em;
}
table tr:nth-child(odd){
background:#ccc;
}<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="parent" >
<div class="child">
<input type="text" ng-model="search"
ng-focus="isDropDown = true" ng-blur='isDropDown = false' />
<span>{{village | uppercase }}</span>
</div>
<table ng-show="isDropDown">
<tbody>
<tr ng-repeat="item in items|filter: search" ng-mousedown="isDropDown = false;select(item)">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Stack Overflow用户
发布于 2016-08-25 06:16:14
你需要改变你的状态ng-mouseleave="isDropDown = true"这里是柱塞https://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39137168
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号