简单来说,如果用户从“完整列表”切换到“部分列表”,则在第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>