lundi 1 août 2016

Search users having skills using selected checkboxes using AngularJS

I am in process of building a "User Skill Search Application" in AngularJS.

The concept is simple we have users with different skills. We want to build an application where we can see easily see if we have a user with say X and Y skills.

I have skills as checkboxes and user as list.

Now, I am stuck on how to filter the list based on selected skills.

Please see it should be an AND operation i.e. user should possess all the skills selected in checkbox.

Please see http://ift.tt/2arPCxM

angular.module("myApp", [])
    .controller("TreeController", ['$scope', function ($scope) {
     $scope.users = [
        {    "name": "User1",    "skill": ['DotNet','ASP.Net']  },
        {    "name": "User2",   "skill": ['DotNet','Oracle'] },
        {    "name": "User3",    "skill": ['Microsoft'] },  
        {    "name": "User4",    "skill": ['ASP.Net'] },  
        {    "name": "User5",    "skill": ['Oracle DBA','ASP.Net'] }
        ];

     
    $scope.nodeSearch = function (treeNodes, searchID) {
        for (var nodeIdx = 0; nodeIdx <= treeNodes.length - 1; nodeIdx++) {
            var currentNode = treeNodes[nodeIdx];
            if (currentNode.sys_id == searchID) {
                return currentNode;
            } else {
                var foundDescendant = $scope.nodeSearch(currentNode.children, searchID);
                if (foundDescendant) {
                    return foundDescendant;
                }
            }
        }
        return false;
    };
    $scope.setData = function (data) {
        var elements = [];
        if (data.chk === true && data.parent !== null) {
            elements.push($scope.nodeSearch($scope.tree, data.parent));
        } else if (data.chk === false) {
            angular.forEach(data.children, function (child, key) {
                elements.push($scope.nodeSearch(data.children, child.sys_id));
            });
        }
        angular.forEach(elements, function (element, key) {
            element.chk = data.chk;
            $scope.setData(element);
        });
    };
       
        $scope.getAllActive = function () {
        var data = [
        {    "name": "Oracle DBA",    "parent": "2",    "sys_id": "2.1"  },
        {    "name": "Microsoft",    "parent": "",    "sys_id": "1"  },
        {    "name": "Oracle",    "parent": "",    "sys_id": "2"  },  
        {    "name": "ASP.Net",    "parent": "1.1",    "sys_id": "1.1.1"  },  
        {    "name": "DotNet",    "parent": "1",    "sys_id": "1.1"  }
        ];
         var dataMap = data.reduce(function(map, node) {
                                map[node.sys_id] = node;
                                return map;
                        }, {});
                        
                        // create the tree array
                        var tree = [];
                        data.forEach(function(node) {
                                // add to parent
                                var parent = dataMap[node.parent];
                                if (parent) {
                                        // create child array if it doesn't exist
                                        (parent.children || (parent.children = []))
                                        // add node to child array
                                        .push(node);
                                        if(!("children" in node))
                                                {
                                                node.children=[];
                                        }
                                } else {
                                        // parent is null or missing
                                        if(!("children" in node))
                                                {
                                                node.children=[];
                                        }
                                        tree.push(node);
                                }
                        });
                        $scope.tree = JSON.parse(JSON.stringify(tree, null, '  '));
        };
     function initTree(tree) {
       function processNode(node) {
         angular.forEach(node.children, function(child) {
           if(processNode(child) === true) {
             node.chk = true;   
           }
         });
                
         return node.chk;
       }
            
       angular.forEach(tree, processNode);
     };
     initTree($scope.tree);
}]);
ul {
    list-style: circle;
}
li {
    margin-left: 20px;
}
<script src="http://ift.tt/1Mrw6cj"></script>
<body ng-app="myApp" ng-controller="TreeController" data-ng-init="getAllActive()">
<div style="float:left; width: 20%">
<script type="text/ng-template" id="tree_item_renderer.html">
    <input type="checkbox" ng-model="data.chk" ng-change="setData(data)"> 
    <ul>
        <li ng-repeat = "data in data.children" ng-include= "'tree_item_renderer.html'"></li>
    </ul>
</script>
<ul>
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
    
    
</ul>
</div>
<div ng-repeat="user in users" style="float:right; width: 80%">
                    <header><h3></h3></header>
                                        <ul ng-repeat="skl in user.skill">
                                                <li></li>
                                        </ul>
</div>
</body>

Please feel free to modify the code :).




Aucun commentaire:

Enregistrer un commentaire