角JS - 通過按鍵名稱篩選對象鍵

我有對象的人角JS - 通過按鍵名稱篩選對象鍵

persons = { 
    name : 'Thomas M', 
    username : 'mthomas', 
    company : 'XYZ', 
    email : '[email protected]' 
    city : 'Philadelphia', 
    country : 'USA' 
};

沒有任何過濾的，如果我通過關鍵字過濾，即鍵名對象 - 名稱，它將顯示名用戶名

AngularJS過濾器適用於價值而關鍵的價值。

來源

2016-05-31 Naga Sai A

Plunker鏈路https://plnkr.co/edit/7NEruSOtUjIWS5ceKe36?p=preview參考這是我目前的工作，並嘗試不同的選擇，以找到解決方案 –

謝謝您的回答很多AWolf。

我找到了簡單的基於密鑰的過濾方法。

請在下面找到參考的小提琴，讓我知道你的意見

 <body> 
     <div ng-app="myApp" ng-controller="myCtrl as mainCtrl"> 
     current filter: 
     <input ng-model="field" ng-change="mainCtrl.cur" /> 
     <div ng-repeat="x in keys | filter:field"> 
      <p>{{x}} : 
      <input readonly="" type="text" ng-model="person[x]" class="person" /> 
      </p> 
     </div> 
     </div> 
    </body> 

    angular.module('myApp', []) 
     .controller('myCtrl', function MainController($scope) { 
     $scope.person = { 
      name: 'Thomas M', 
      username: 'mthomas', 
      company: 'XYZ', 
      email: '[email protected]', 
      city: 'Philadelphia', 
      country: 'USA' 
     }; 

     $scope.keys = Object.keys($scope.person); 



     }); 

    /* Styles go here */ 

    .person { 
     border: none 
    }

感謝西

來源

2016-06-01 02:54:05

https://jsfiddle.net/Nagasai_Aytha/eauvh71L/1/ –

好的解決方案。你也可以創建一個自定義過濾器，但你的方式也是可以的。我只是不喜歡你的關鍵迭代ng-repeat標記。它正在工作，但我認爲''（鍵，值）'ng-repeat語法更易於使用/閱讀。請看看[小提琴]（https://jsfiddle.net/xz7ykw4z/）。 – AWolf

看起來不錯..謝謝AWolf :) ..投票給你:) –

您可以創建一個迭代對象的for循環，並檢查是否需要選擇屬性。

如果你不喜歡編碼，你可以使用underscore.pick。

請看看下面的演示或在這fiddle。

angular.module('demoApp', []) 
 
    .controller('mainController', MainController); 
 

 
function MainController() { 
 
    var vm = this; 
 

 
    var person = { 
 
    name: 'Thomas M', 
 
    username: 'mthomas', 
 
    company: 'XYZ', 
 
    email: '[email protected]', 
 
    city: 'Philadelphia', 
 
    country: 'USA' 
 
    }; 
 

 
    vm.curFilter = 'name, username'; 
 

 
    vm.applyFilter = function() { 
 
    var filterData = vm.curFilter 
 
     .replace(/\s/g, '').split(','); 
 
    vm.filteredPerson = pick(person, filterData); 
 
    }; 
 

 
    vm.applyFilter(); // initial apply 
 

 
    function pick(obj) { 
 
    var keys = Object.keys(obj), 
 
     args = arguments[1] instanceof Array ? arguments[1] : [].slice.apply(arguments), 
 
     key = '', 
 
     picked = {}; 
 

 
    for (var i = 0; i < keys.length; i++) { 
 
     key = keys[i]; 
 
     //console.log(key, args, args.indexOf(key)); 
 
     if (args.indexOf(key) !== -1) { 
 
     picked[key] = obj[key]; 
 
     } 
 
    } 
 

 
    return picked; 
 
    } 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController as mainCtrl"> 
 
    current filter: 
 
    <input ng-model="mainCtrl.curFilter" ng-change="mainCtrl.applyFilter()"> 
 
    <pre> 
 
{{mainCtrl.filteredPerson | json : 2}} 
 
</pre> 
 
</div>

來源

2016-05-31 22:41:31 AWolf

角JS - 通過按鍵名稱篩選對象鍵

回答

相關問題