Question

在角度应用程序中，对于搜索字段，我使用来自控制器的过滤器功能。它工作正常，但我无法用当前模型实现ng-blur。

我不知道为什么这不起作用，有人在这帮助我吗？

我也在2个单独的行中显示数据（根据客户要求），请评估我的显示方法，如果有人知道更好的方法，请告诉我

当我使用模糊时，点击列表时没有选择：

 <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 part：

$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;

  }

Live Demo

Answer 1

删除手表，您可以使用Traceback (most recent call last): File "C:\Python27\testfile\test.py", line 106, in <module> lib.ansferA(instruct,ctypes.c_double(3), outstruct1, outstruct2) WindowsError: exception: access violation writing 0x0000000000000000和filter阻止点击事件，以便点击停用。

<强>解

＆＃13;

blur

＆＃13;

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;

  };

});

＆＃13;

.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;
}

＆＃13;

Answer 2

你需要改变自己的状况 ng-mouseleave="isDropDown = true" 这是普兰克 https://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2

`ng-blur` - 根据预期的下拉框不要晃动

2 个答案: