过滤 angularjs 中每个键的唯一值并得到检查

我有一个有角度的对象，我必须通过过滤和排序来显示它的记录。此外，我还必须使用复选框显示对象中每个键的唯一值记录。
我显示带有过滤器和排序的记录，还显示带有复选框的每个键的唯一值。
现在，我必须获取每个键的这些复选框的值。

这是我的代码，下面有 plunker url。
索引.html

<body ng-controller="myController">
<label ng-repeat="option in structure.tabs">
    <input type="checkbox" ng-model="option.selected">{{option.index}}
</label>
<table border="1" width="100%">
    <tr>
        <th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
    </tr>
    <tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
        <td ng-show="structure.tabs[0].selected">{{data.name}}</td>
        <td ng-show="structure.tabs[1].selected">{{data.age}}</td>
        <td ng-show="structure.tabs[2].selected">{{data.city}}</td>
        <td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
    </tr>
</table>
<h1>Unique Values Table (per key)</h1>
<table border="1" width="100%" style="margin-top: 50px;">
    <tr>
        <th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
    </tr>
    <tr>
        <td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
            <table border='1'>
                <tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
                    <td>
                        <input type="checkbox">{{dv[hv.filter]}}
                    </td>
                </tr>
            </table>
            <br>
            <button ng-click="getChecked(hv.filter)">Get Checked</button>
        </td>
    </tr>
</table>
</body>

应用.js

var app = angular.module('myApp', []);
app.controller("myController", function ($scope,$log) {
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column) {
    $scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
    $scope.sortColumn=column;
}
$scope.structure={
    "tabs": [
        {
            "index": "Name",
            "filter": "name",
            "selected": true
        },
        {
            "index": "Age",
            "filter": "age",
            "selected": true
        },
        {
            "index": "City",
            "filter": "city",
            "selected": true
        },
        {
            "index": "Designation",
            "filter": "designation",
            "selected": true
        }
    ],
    "info": [
        {
            "name": "Abar",
            "age": "27",
            "city": "Ghaziabad",
            "designation": "Php Developer"
        },
        {
            "name": "Abar",
            "age": "27",
            "city": "Okhla",
            "designation": "Html Developer"
        },
        {
            "name": "Nishant",
            "age": "25",
            "city": "Delhi",
            "designation": "Angular Developer"
        },
        {
            "name": "Amit",
            "age": "30",
            "city": "Noida",
            "designation": "Android Developer"
        }
    ]
};
$scope.getChecked = function(tab) {
    alert("Need to get all checked value of key: "+tab);
}
});
app.filter('unique', function() {
return function (arr, field) {
    var o = {}, i, l = arr.length, r = [];
    for(i=0; i<l;i+=1) {
        o[arr[i][field]] = arr[i];
    }
    for(i in o) {
        r.push(o[i]);
    }
    return r;
};
});

见普伦克 http://embed.plnkr.co/wblXhejmSWApBeCAusaI/

你可以像下面的例子一样做：

索引.html

<!DOCTYPE html>
<html ng-app="myApp">
 <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="script.js"></script>
</head>
<body ng-controller="myController">
<h1>Filter Table</h1>
<label ng-repeat="option in structure.tabs">
    <input type="checkbox" ng-model="option.selected">{{option.index}}
</label>
<table border="1" width="100%">
    <tr>
        <th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
    </tr>
    <tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
        <td ng-show="structure.tabs[0].selected">{{data.name}}</td>
        <td ng-show="structure.tabs[1].selected">{{data.age}}</td>
        <td ng-show="structure.tabs[2].selected">{{data.city}}</td>
        <td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
    </tr>
</table>
<h1>Unique Values Table (per key)</h1>
<table border="1" width="100%" style="margin-top: 50px;">
    <tr>
        <th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
    </tr>
    <tr>
        <td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
            <table border='1'>
                <tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
                    <td>
                        <input ng-model="item" type="checkbox" ng-change="getCheckedValues(item,dv,hv.filter)">{{dv[hv.filter]}}
                    </td>
                </tr>
            </table>
            <br>
            <button  ng-click="getChecked(hv.filter)">Get Checked</button>
        </td>
    </tr>
  </table>
 </body>
</html>

应用.js

var app = angular.module（'myApp'， []）;app.controller（"myController"， function （$scope，$log） {

$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column) {
    $scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
    $scope.sortColumn=column;
}
var array = []
array["name"] = [];
array["age"] = [];
array["designation"] = [];
array["city"] = [];
$scope.getCheckedValues = function(e,val,key){
    console.log(val)
    if(e){
        array[key].push(e)
    }else{
        array[key].shift()
    }
}
$scope.structure={
    "tabs": [
        {
            "index": "Name",
            "filter": "name",
            "selected": true
        },
        {
            "index": "Age",
            "filter": "age",
            "selected": true
        },
        {
            "index": "City",
            "filter": "city",
            "selected": true
        },
        {
            "index": "Designation",
            "filter": "designation",
            "selected": true
        }
    ],
    "info": [
        {
            "name": "Abar",
            "age": "27",
            "city": "Ghaziabad",
            "designation": "Php Developer"
        },
        {
            "name": "Abar",
            "age": "27",
            "city": "Okhla",
            "designation": "Html Developer"
        },
        {
            "name": "Nishant",
            "age": "25",
            "city": "Delhi",
            "designation": "Angular Developer"
        },
        {
            "name": "Amit",
            "age": "30",
            "city": "Noida",
            "designation": "Android Developer"
        }
    ]
};
$scope.getChecked = function(tab) {
    alert("Need to get all checked value of key: "+tab);
    console.log(array[tab])
  }
 });
 app.filter('unique', function() {
   return function (arr, field) {
    var o = {}, i, l = arr.length, r = [];
    for(i=0; i<l;i+=1) {
        o[arr[i][field]] = arr[i];
    }
    for(i in o) {
        r.push(o[i]);
    }
    return r;
  };
});

好吧。为我之前的回答道歉，我完全搞砸了这个问题。

无论如何，我花了将近一个小时试图解决这个问题，并设法使用 $scope.$$watchers[0].last 和 underscorejs 来完成。

//this is how getChecked looks like now
$scope.getChecked = function(tab) {
    var selectedKey = tab.$$watchers[0].last;
    _.each($scope.structure.info,function(row){
        _(row).pairs().filter(function(item){
        _.each(item,function(key){
            if(key===selectedKey)
                {
                    console.log(row);
                    return;
                }
        })
    })
    })

上述方法负责识别密钥并在控制台中吐槽，每次您在下表中选择密钥时。因此，请检查控制台。

解决方案在下面

。

https://embed.plnkr.co/kbiCwhW0RrdHtO3hVEEk/

相关内容

最新更新

热门标签：