javascript - angularjs ng-显示多个div并清理未选择的模型值

Question

我有一个带有下拉值的输入字段:A、B、... Z，称为 ng-model=model.all .
我要ng-show另一个<div>如果 ng-model=model.all 的值等于Option Z 。这部分工作正常。 但问题是:

如何显示 Acat <div>仅当从第一个值中选择除选项 Z 之外的任何其他值时？我试过ng-show="model.all != 'Option Z' ，但它显示 <div>即使没有选择任何内容。仅当选择了 Option Z 以外的内容时，它才需要显示另一个 div。

如您所见，仅当 Acat 不为空时才会显示我的 Bcat，这没关系。
但是，如果我更改第一个中的选择并选择选项Z，那么其他两个div仍然保留其值，因此如果选择选项Z，目标是清除它们，反之亦然，如果有其他情况选择后，其他 div 就会填充值，如果用户决定更改选择并选择选项 Z，那么之前的 div 中的那些值也应该被清除。

<div class="form-group">
    <label class="control-label">ALL</label>
    <ui-select ng-model="model.all" name="all">
        ...
    </ui-select>
</div>


<div class="form-group" ng-show="model.all == 'Option Z'">
    <label>Z categories</label>
    <ui-select name="Zcat" ng-model="model.z">
        ...
    </ui-select>    
</div>

<div class="form-group" ng-show="???">
    <label class="control-label">Category A</label>
    <ui-select name="Acat" ng-model="model.a">
        ...
    </ui-select>
</div>
<div class="form-group" ng-show="!model.a">
    <label class="control-label">Category B</label>
    <ui-select name="Bcat" ng-model="model.b" >
        ...
    </ui-select>
</div>

更新:

在 Mosh Feu 的回答后添加一个简短的注释:
正如您在屏幕截图 /image/z9mYH.jpg 中看到的那样，这永远不应该发生。
要么，我通过
{"all": "Option Z", "z": "Option Z1"}
或
{"all": "Option A", "a": "Option A1", "b": "Option B1"} .
不接受:
{"all": "Option A", "a": "Option A1", "b": "Option B1", "z": "null"}
也不是这个:
{"all": "Option Z", "z": "Option Z1", "a": "null", "b": "null"} .

Answer 1

这可能对你有用:

<div class="form-group">
    <label class="control-label">ALL</label>
    <ui-select ng-model="model.all" ng-change="onModelChange()" name="all">
        ...
    </ui-select>
</div>


<div class="form-group" ng-show="model.all == 'Option Z'">
    <label>Z categories</label>
    <ui-select name="Zcat" ng-model="model.z">
        ...
    </ui-select>    
</div>

<div class="form-group" ng-show="!!model.all && model.all != 'Option Z'">
    <label class="control-label">Category A</label>
    <ui-select name="Acat" ng-model="model.a">
        ...
    </ui-select>
</div>
<div class="form-group" ng-show="!!model.a && model.all != 'Option Z'">
    <label class="control-label">Category B</label>
    <ui-select name="Bcat" ng-model="model.b" >
        ...
    </ui-select>
</div>

这是 Controller 位:

$scope.onModelChange = function(){
    if ($scope.model.all) {
        $scope.model.z = "";
        $scope.model.a = "";
        $scope.model.b = "";
    }
};