Question

我想有两个菜单，第一个菜单中的选项设置第二个菜单中的选项。这将在使用Angular JS的Salesforce VisualForce页面上完成，特别是使用UI-Grid模块。类似的控件使用Angular按钮类作为菜单，但我没有看到如何使用按钮动态设置选项。

我目前的设计是使用选择控件和ng选项。

在controller.js中，我声明了菜单使用的变量，以及用于替换第二个菜单的数组值的函数。请注意，$ scope.fieldOptions是通过对Salesforce的查询设置的，以从快速列表字段中提取选项值。此数组用于UI-Grid filter选项，其格式为“[{value：'1'，label：'male'}，{value：'2'，label：'female'} ... ”

  $scope.editRows = 'all';
  $scope.editField = 'Program';
  $scope.editValue;
  $scope.editOptions = {};


$scope.setEditOptions = function(editField) {
  switch (editField) {
    case "Program" :
      $scope.editOptions = $scope.fieldOptions.Program_Enrolled__c;
      break;
    case "Appl. ASSET" :
      $scope.editOptions = $scope.fieldOptions.Applied_for_ASSET__c;
      break;
    case "4 Year Degree" :
      $scope.editOptions = $scope.fieldOptions.Has_Student_Completed_4_Year_Degree__c;
      break;
  }
}

在VisualForce页面上，我在按钮组中定义了按钮，紧接着是select控件。

        <div class="row" style="margin-bottom:10px;">   
          <div class="col-md-12">
            <div class="btn-group">
              <div class="btn-group" dropdown="true" dropdown-append-to-body="true">
                <button class="btn btn-default dropdown-toggle" dropdown-toggle="true" type="button">
                  {{editRows | capitalize}} Rows <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li ng-click="editRows = 'all'"><a href="#">All Rows</a></li>
                  <li ng-click="editRows = 'visible'"><a href="#">Visible Rows Only</a></li>
                  <li ng-click="editRows = 'selected'"><a href="#">Selected Rows Only</a></li>
                </ul>
              </div>
              <div class="btn-group" dropdown="true" dropdown-append-to-body="true">
                <button class="btn btn-default dropdown-toggle" ng-click="setEditOptions(editField)"
                        dropdown-toggle="true" type="button">
                  {{editField | capitalize}} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li ng-click="editField = 'Program'"><a href="#">Program Enrolled</a></li>
                  <li ng-click="editField = 'Appl. ASSET'"><a href="#">Applied for ASSET</a></li>
                  <li ng-click="editField = '4 Year Degree'"><a href="#">4-year degree?</a></li>
                </ul>
              </div>
             <div>
                <select ng-model="editValue" ng-options="option.label for option.value in selectOptions">
                </select>  
             </div> 
                
              </div>
    
              <button id="split-button" type="button" class="btn btn-default" ng-click="massUpdate()">Modify</button>
            </div>
          </div>

我是否在正确的轨道上？如果有更简单的方法，或直接使用按钮菜单的方法，请随时提供建议。否则，问题是我如何使用ng-options？

Answer 1

好吧，比我想象的容易。两个拼写错误。首先，我使用{}而不是[]声明了数组。我在select语句ng-options部分拼错了它。修复了它并且它正在工作。

如果有人知道任何使用按钮的技巧，那么它会匹配其他按钮，那将是美妙的。否则我想我会选择所有选择以保持一致性。此外，也许可以将这些选项捆绑到一个数组中，主菜单选项作为键，所以我可以在没有case语句的情况下引用。

  $scope.editRows = 'all';
  $scope.editField = 'Program';
  $scope.editValue;
  $scope.editOptions = {};

从Salesforce快速列表选项

1 个答案: