Question

点击var blogHeight = $('.blog-single-post').height(); $('.right-sidebar').css('height',blogHeight);我正在将值存储到<div>，我正在显示clickedStatus，在此基础上我想显示基于<div>的值一个数组。

例如：当用户点击clickedStatus为New Employees的{{1}}时，我想在divGroupCompany下显示{{NewEmps}}。

我想做的事情如下：显示clickedStatus {{Enums.StatusForDropdown.EvalstatusTitle}}

js：

Enums.StatusForDropdown.EvalStatusId = 8

HTML：

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

Answer 1

如果您创建一个Plunker或我们可以实时测试的东西，这将有所帮助。但这是一个可能的解决方案。首先向范围/控制器添加一个方法，根据用户点击选择状态。

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

替代数据结构

如果StatusForDropdown不必是数组，则可以将其设为对象

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

这样您就可以为其他div执行少量硬编码：

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

或者，理想情况下，您可以将StatusForDropdown保留为数组，然后使用ng-repeat循环遍历数组并创建div个数组。如果您想在此处获得更多指导，请与我们联系。

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

1 个答案:

替代数据结构