根据条件Angularjs从数组中获取值

单击一个

时，我将一个值存储到

clickedStatus

中，并显示一个

，在该状态下，我希望根据数组中的

clickedStatus

显示一个值

例如： 当用户单击

{{NewEmps}}

时，我想在

divGroupCompany

下显示

newemployees

，其

clickedStatus

将为8

我想执行如下操作：显示

{{Enums.StatusForDropdown.EvalstatusTitle}

其中

Enums.StatusForDropdown.EvalStatusId=8

js:

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>

{{Enums.StatusForDropdown.EvalstatusTitle}
新员工
{{NewEmps}}
筛选
{{WotcScred}}
Wotc
通过资格预审
{{WotcQualfd}}

如果您创建一个Plunk或我们可以现场测试的东西，这将很有帮助。但这里有一个可能的解决方案。首先向作用域/控制器添加一个方法，该方法基于用户单击选择状态

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

然后将单击的

div

更改为

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

这将允许您对其他

div

s执行少量硬编码：

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

{{Enum.StatusForDropdown.8.EvalstatusTitle}

或者，理想情况下，您可以将

StatusForDropdown

保留为一个数组，然后使用

ng repeat

在数组中循环并创建那些

div

s。如果您需要更多的指导，请告诉我

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

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

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