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

【问题标题】：ng-if is not working when data-ng-model is changed更改 data-ng-model 时 ng-if 不起作用
【发布时间】：2014-09-16 16:03:29
【问题描述】：

我使用ng-options 填充下拉列表，有 3 个相互依赖的下拉列表。如果我在 Dropdown1 中选择一个特定选项，其他两个下拉菜单应该会出现。然后，如果我在这两个下拉列表中选择了一些值并且没有保存更改第一个下拉列表中的值，则 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 停止工作。你能详细解释一下这个问题吗？

【问题讨论】：

你的控制器是什么样的？ $scope.note 是否在您的控制器中定义？
摆脱<option>标签上的ng-model，这肯定对你没有帮助

标签： javascript html angularjs drop-down-menu

【解决方案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="";
});

两者都会刷新下拉菜单。

【讨论】：

【解决方案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>

【讨论】：