Question

使用ng-options填充下拉列表，有3个下拉列表相互依赖。如果我在Dropdown1中选择一个特定选项，则应显示另外两个drpdowns。然后，如果我在这两个下拉列表中选择一些值并且没有保存，则在第一个下拉列表中更改值时，2个下拉列表应该消失。现在的问题是，如果我在Dropdown1中重新选择相同的选项，我之前选择的值不会刷新。

<li class="col-sm-3">
    <p>Reason<b>*</b></p>
    <p>
        <select data-ng-model="note.reason" data-ng-options="option as option.value for option in reasons">
            <option style="display:none"  data-ng-model="note.reason" value="">Select Reason</option>
        </select>
    </p>
</li>
<li class="col-sm-3" ng-show="note.reason.value=='Intervention'">
    <p>Category<b>*</b></p>
    <p>
        <select data-ng-model="note.category"  ng-if ="note.reason" data-ng-options="option as option.value for option in categories">
            <option style="display:none" selected="selected" value="">Select Category</option>
        </select>
    </p>
</li>
<li class="col-sm-3" ng-show="note.reason.value=='Intervention'">
    <p>Tone<b>*</b></p>
    <p>
        <select data-ng-model="note.tone" ng-if ="note.reason" data-ng-options="option as option.value for option in tones">
            <option style="display:none"  value="">Select Tone</option>
        </select>
    </p>
</li>

我正在使用ng-if执行相同操作，之前它在data-ng-model="reason"时正常工作，当data-ng-model更改为note.reason时，ng-if停止工作。你能否详细解释一下这个问题。

Answer 1

您可以使用ng-change，如下所示

<select ng-change="note.tone='';note.category='';" data-ng-model="note.reason" data-ng-options="option as option.value for option in reasons">

或者将$watch放在控制器中，如下所示

$scope.$watch('note.reason', function(){
    $scope.note.tone="";
    $scope.note.category="";
});

两者都会刷新下拉。

Answer 2

Thanq，这很好用。

$scope.prvdNote = {};
$scope.show=function(){
		if(!angular.isUndefined($scope.prvdNote.prvdReason) && $scope.prvdNote.prvdReason.value=='Intervention'){
			return true;
		}else{
			$scope.prvdNote.prvdTone = undefined;
			$scope.prvdNote.prvdCategory = undefined;
			return false;
		}
		
	   
	};

<li class="col-sm-3">
					<p>Reason<b>*</b></p>
					<p>
       
					<select data-ng-model="prvdNote.prvdReason" data-ng-options="option as option.value for option in reasons" ><option style="display:none"   value="" >Select Reason</option></select>

					</p>
				</li>

				<li class="col-sm-3" ng-show="show()" >
					<p>Category<b>*</b></p>
					<p>
						<select data-ng-model="prvdNote.prvdCategory"   data-ng-options="option as option.value for option in categories" ><option style="display:none" value="" >Select Category</option></select>
					</p>
				</li>
				<li class="col-sm-3" ng-show="show()"><p>Tone<b>*</b></p>
				<p>
						<select data-ng-model="prvdNote.prvdTone"  data-ng-options="option as option.value for option in tones" ><option style="display:none" value="" >Select Tone</option></select>
					</p>
				</li>

更改data-ng-model时ng-if不起作用

2 个答案: