`ng-blur` - ドロップダウンボックスで期待どおりに動揺しない

角度アプリでは、検索フィールドに対して私はコントローラのフィルタ機能を使用しています。それはうまく動作しますが、私は現在のモデルでng-blurを実装することができません。`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一部：

$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

出典

2016-08-25 user2024080

は、あなたの条件 –

はあなたの時計を削除し、あなたはとてもクリックで無効にするイベントをクリックしfilterとblur防止を使用することができます。あなたがここにあなたの条件 ng-mouseleave="isDropDown = true" を変更する必要が

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>

出典

2016-08-25 06:08:12

をwahtsですタブ（ぼかし）ドロップダウンメニューnあなたの結果を確認できますか？ – user2024080

は私がデータを選択した後、私は押したときPlunker https://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2

出典

2016-08-25 06:16:14

私の問題は、入力からのマウスのぼかしがドロップされていない場合、私のデモを確認してください（ぼかしイベントを取り除いて戻す） – user2024080

あなたのplnkrに何もない、有効なリンクを提供してください – user2024080

https://plnkr.co/edit/66Ns1t85GnIfa8UPcs0r？p =プレビューを確認してください –

`ng-blur` - ドロップダウンボックスで期待どおりに動揺しない

答えて

関連する問題