CODEWITHSUNDEEP
angularjsangular-filters
user2024080
user2024080

Reputation: 5101

`ng-blur` - not wroking as per expected on drop down box

In angular app, for the search field i am using a filter function from controller. it works fine, But i am not able to implement the ng-blur with current model.

i don't know why this is not working, any one help me here?

As well I am displaying data in 2 separate line ( as per client request ), please evaluate my display approach as well, if any one knows the better way, let me know

when i use the blur, on click of list nothing selected :

 <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"
      >

here is my code :

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

Upvotes: 2

Views: 1699

Answers (2)

Stark Buttowski
Stark Buttowski

Reputation: 1849

Remove your watch and you can use filter and blur prevents click event so disable on clicking.

SOLUTION

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="[email protected]" 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>

Upvotes: 1

zeeshan Qurban
zeeshan Qurban

Reputation: 387

you need to change your condition ng-mouseleave="isDropDown = true" Here is Plunker https://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2

Upvotes: 0

Related Questions