CODEWITHSUNDEEP
angularjs
BumbleBee
BumbleBee

Reputation: 10789

Get the value from array based on condition Angularjs

On click of a <div> I am storing a value into clickedStatus and I am showing a <div>, under which I want to display a value based on clickedStatus from an array.

For Example : I want to display New Employees under divGroupCompany when user clicks on {{NewEmps}} whose clickedStatus will be 8.

I would like to do something like: Display {{Enums.StatusForDropdown.EvalstatusTitle}} Where Enums.StatusForDropdown.EvalStatusId = 8

js :

WotcDashBoardModule.constant('Enums', {
  StatusForDropdown:[
    {EvalStatusId: '1', EvalstatusTitle: 'All Employees'},
    {EvalStatusId: '8', EvalstatusTitle: 'New Employees'},
    {EvalStatusId: '12', EvalstatusTitle: 'Screened'},
    {EvalStatusId: '5', EvalstatusTitle: 'WOTC Pre-Qualified'},
    {EvalStatusId: '11', EvalstatusTitle: 'Submitted Missing Docs'},
    {EvalStatusId: '10', EvalstatusTitle: 'Not Submitted'},
    {EvalStatusId: '3', EvalstatusTitle: 'Employees Approved'},
    {EvalStatusId: '9', EvalstatusTitle: 'Employees Denied'},
    {EvalStatusId: '4', EvalstatusTitle: 'Request For Additional Info'}
  ]
});

WotcDashBoardModule.controller('WotcDashBoardController', ['$scope', '$filter', 'WotcDashBoardModuleService', '$timeout','Enums', function ($scope, $filter, WotcDashBoardModuleService, $timeout,Enums) {
  $scope.Enums = Enums;
  $scope.clickedStatus;    
});

HTML :

<div class="btn-group" id="divGroupCompany" style="display: inline-block;" ng-show="clickedStatus">
    <span>
        {{Enums.StatusForDropdown.EvalstatusTitle}}
    </span>
</div>

<div class="row">
    <div class="col-md-4" style="text-align:center;cursor:pointer">
        <div style="font-weight:bold;font-size:13px" class="text-uppercase">
            New <br /> Employees
        </div>
        <div style="font-size:40px;margin-top:10px" ng-click="clickedStatus='8'">
            {{NewEmps}}
        </div>
        <div class="arrow_box hidden-xs" style="margin-top:-35px;margin-left:125px"></div>
    </div>
    <div class="col-md-4" style="text-align:center">
        <div style="font-weight:bold;font-size:13px" class="text-uppercase">
            Screened
        </div>
        <div style="font-size:40px;margin-top:10px" ng-click="clickedStatus='12'">
            {{WotcScred}}
        </div>
        <div class="arrow_box hidden-xs" style="margin-top:-35px;margin-left:125px"></div>
    </div>
    <div class="col-md-4" style="text-align:center">
        <div style="font-weight:bold;font-size:13px" class="text-uppercase">
            Wotc <br /> Pre-Qualified
        </div>
        <div style="font-size:40px;margin-top:10px" ng-click="clickedStatus='5'">
            {{WotcQualfd}}
        </div>
    </div>
</div>

Upvotes: 1

Views: 1478

Answers (1)

lebolo
lebolo

Reputation: 2150

It would help if you create a Plunker or something we can test live. But here's a possible solution. First add a method to the scope/controller that selects the status based on a user click.

WotcDashBoardModule.controller('WotcDashBoardController', ...) {
  $scope.Enums = Enums;
  $scope.status = undefined;
  //$scope.clickedStatus = undefined;

  $scope.setStatus = function(statusId) {
    //$scope.clickedStatus = statusId; // If you need this for other purposes (I've changed the divGroupCompany ng-show condition though)
    $scope.status = $scope.Enums.StatusForDropdown.find(function(el, idx) {
      return el.EvalStatusId === statusId;
    });

    // If the find method doesn't work for you, you can loop through the array yourself
    // and return the object if the ids match (or undefined if not found)
  };
});

Then change your clicking div to

<div style="font-size:40px;margin-top:10px" ng-click="setStatus('5')">
    <!-- ... -->
</div>

And finally display the title with

<div class="btn-group" id="divGroupCompany" style="display: inline-block;" ng-show="status">
    <span>
        {{status.EvalstatusTitle}}
    </span>
</div>

Alternative data structure

If StatusForDropdown doesn't have to be an array, you could make it an object

StatusForDropdown:{
  '1': {EvalStatusId: '1', EvalstatusTitle: 'All Employees'},
  '8': {EvalStatusId: '8', EvalstatusTitle: 'New Employees'},
  '12': {EvalStatusId: '12', EvalstatusTitle: 'Screened'},
  // ...
}

This would allow you to do a little less hardcoding for your other divs:

<div style="font-weight:bold;font-size:13px" class="text-uppercase">
    {{Enum.StatusForDropdown.8.EvalstatusTitle}}
</div>

Or, ideally, you could keep StatusForDropdown as an array but then use ng-repeat to loop through the array and create those divs. Let me know if you want more guidance here.

Upvotes: 1

Related Questions