Question

我有一个角度对象，我必须通过过滤和排序显示其记录。此外，我必须使用复选框显示对象内每个键的唯一值记录我用过滤器和排序显示记录，我也用复选框显示每个键的唯一值现在我必须得到每个键的这些复选框的值。

这是我的代码，下面是plunker url。
的的index.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>

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

参见plunker http://embed.plnkr.co/wblXhejmSWApBeCAusaI/

Answer 1

您可以执行以下示例：

<强>的index.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>

<强> app.js

var app = angular.module（＆＃39; myApp＆＃39;，[]）; app.controller（＆＃34; myController＆＃34;，函数（$ 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;
  };
});

Answer 2

好的。对我之前的回答表示道歉，我完全不知道这个问题。

无论如何，我花了将近一个小时试图解决这个问题并设法使用$ 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;
                }
        })

    })
    })

每次在下表中选择一个键时，上面的方法负责识别控制台中的键和随地吐痰。所以检查控制台。

解决方案是在plunkr下面。

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

在angularjs中过滤每个键的唯一值并进行检查

2 个答案: