Question

将第二次下拉菜单从“酱汁”更改为“奶制品”
将第一个下拉列表“D - 完整列表”更改为“A - 部分列表”
显示第二个下拉列表“选择...”并将第三个下拉列表保留为默认值“Ice”

简单来说，如果用户从“完整列表”切换到“部分列表”，则在第2或第3选项中显示“选择...”，因为所选选项在完整列表中可用，但在部分列表中不可用。但是，如果用户选择了完整列表和部分列表中都有的选项，请不要切换到“选择...”并保持选项值不变。

我为范围值添加了if（）语句。它不起作用。第二个和第三个下拉列表是空的而不是显示“select ...”我硬编码'undefined'这远非理想，我如何设置它以便适用于所有场景和任意数量的值？

最后，我需要将值返回给用户。

Plunker（https://plnkr.co/edit/twzFtMVv5ZDRJ1BHaqWo?p=preview）

// Code goes here

var app = angular.module("prototype", []);

app.controller("Controller", function($scope) {
 $scope.myDropDown = 'aisleD';
 $scope.full1 = 'Sauces';
 $scope.full2 = 'Ice';
 
 	$scope.onChanged = function() {
		
	
	//How do you elegantly mock this interaction up in AngularJS?
$scope.partial1 = $scope.full1;
	if($scope.partial1 == 'undefined:undefined'){
	$scope.partial1 = 'select'
	}
	else
    {
	$scope.partial1 = $scope.full1;
	}
	
$scope.partial2 = $scope.full2;
	if($scope.partial2 == 'undefined:undefined'){
	$scope.partial2 = 'select'
	}
	else
    {
	$scope.partial2 = $scope.full2;
	}
	
	
		
		
		
	}
});

#timeFrameAndMeasures .InputField{float:left;width:auto;margin-right:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.0" data-semver="1.2.0" src="https://code.angularjs.org/1.2.0/angular.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body ng-app="prototype">
    <div id="timeFrameAndMeasures" ng-controller="Controller">
      <div class="InputField">
        <select class="InputField-select InputField-input--withIconButton" ng-model="myDropDown" ng-change="onChanged()">
          <option value="aisleA">A - Partial List</option>
          <option value="aisleB">B - Partial List</option>
          <option value="aisleC">C - Partial List</option>
          <option value="aisleD">D - Full List</option>
          <option value="aisleE">E - Full List</option>
          <option value="aisleF">F - Full list</option>
        </select>
      
      </div>
      
      <!--1st measure partial list-->
      <div class="InputField" ng-show="myDropDown=='aisleA' || myDropDown=='aisleB' || myDropDown=='aisleC'">
        <select class="InputField-select InputField-input--withIconButton" ng-model="partial1">
          <option value="select">Select...</option>
          <option value="Apple">Apple</option>
          <option value="Ice">Ice</option>
          <option value="Sauces">Sauces</option>
        </select>
       
      </div>
      <!--end 1st measure partial list-->
      <!--2nd measure partial list-->
      <div class="InputField" ng-show="myDropDown=='aisleA' || myDropDown=='aisleB' || myDropDown=='aisleC'">
        <select class="InputField-select InputField-input--withIconButton" ng-model="partial2">
          <option value="select">Select...</option>
          <option value="Apple">Apple</option>
          <option value="Ice">Ice</option>
          <option value="Sauces">Sauces</option>
        </select>
       
      </div>
      <!--end 2nd measure partial list-->
      <!--1st measure full list-->
      <div class="InputField" ng-show="myDropDown=='aisleD' || myDropDown=='aisleE' || myDropDown=='aisleF' || myDropDown=='custom'" ng-hide="myDropDown=='aisleA' || myDropDown=='aisleB' || myDropDown=='aisleC'">
        <select class="InputField-select InputField-input--withIconButton" ng-model="full1" ng-change="onChanged()">
          <option value="Apple">Apple</option>
          <option value="Dairy">Dairy</option>
          <option value="Ice">Ice</option>
          <option value="Magazines">Magazines</option>
          <option value="Meats">Meats</option>
          <option value="Pantry">Pantry Staples</option>
          <option value="Sauces">Sauces</option>
          <option value="spice">Spice</option>
        </select>
     
      </div>
      <!--end 1st measure-->
      <!--2nd measure full list-->
      <div class="InputField" ng-show="myDropDown=='aisleD' || myDropDown=='aisleE' || myDropDown=='aisleF' || myDropDown=='custom'" ng-hide="myDropDown=='aisleA' || myDropDown=='aisleB' || myDropDown=='aisleC'">
        <select class="InputField-select InputField-input--withIconButton" ng-model="full2" ng-change="onChanged()">
          <option value="Apple">Apple</option>
          <option value="Dairy">Dairy</option>
          <option value="Ice">Ice</option>
          <option value="Magazines">Magazines</option>
          <option value="Meats">Meats</option>
          <option value="Pantry">Pantry Staples</option>
          <option value="Sauces">Sauces</option>
          <option value="spice">Spice</option>
        </select>
     
      </div>
      <!--end 2nd measure-->
    </div>
  </body>

</html>

AngularJS下拉条件

0 个答案: