1

有没有人能够像这样ng-switch在<select> -> <option>标签上运行？：

<select ng-model="form.permitLocality" ng-switch on="localityTypeRadio">
    <option ng-switch-when="County" ng-repeat="county in countyList">
        {{ county.name }}
    </option>
    <option ng-switch-when="City" ng-repeat="city in cityList">
        {{ city.name }}
    </option>
    <option ng-switch-when="Town" ng-repeat="town in townList">
        {{ town.name }}
    </option>
</select>

我没有收到任何错误或任何选项（已验证所有值），我只是认为它会为我节省几行，并认为我会尝试一下。

这是我的选择器，以防您好奇（值已验证）：

<label class="radio inline">
    <input type="radio" name="localityTypeRadio"
        ng-model="localityTypeRadio" value="County">
    County
</label>
<label class="radio inline">
    <input type="radio" name="localityTypeRadio" 
        ng-model="localityTypeRadio" value="City">
    City
</label>
<label class="radio inline">
    <input type="radio" name="localityTypeRadio" 
        ng-model="localityTypeRadio" value="Town">
    Town
</label>

这没什么大不了的，只是不知道这是否是一个限制/不建议使用ng-switch

编辑

当我最初说什么都没有发生（浏览器缓存）时，我错了，似乎有正确数量的选项，但源代码只显示空白：

<select ng-model="form.permitLocality" class="input-block-level ng-pristine ng-valid" ng-switch="" on="localityTypeRadio" ng-hide="form.permitLocality.length"><option value="? string: ?"></option>
    <!-- ngRepeat: county in countyList --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County -->
    <!-- ngRepeat: city in cityList --><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option>
    <!-- ngRepeat: town in townList --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town -->
</select>
4

1 回答 1

1

我认为更好的方法是稍微修改我们的模型以简化代码：

如果我们使用如下键定义模型：

$scope.list = {
        City: [{name: "cityA"}, {name: "cityB"}],
        County: [{ name: "countyA"}, {name: "countyB"}],
        Town: [{ name: "townA"}, {name: "townB"}]
      };

我们可以大幅切断我们的 HTML：

我们可以用 3 行定义的无线电组：

<label ng-repeat="(key,val) in list">
   <input type="radio" name="localityTypeRadio" ng-model="$parent.localityTypeRadio" ng-value="key" />{{key}}
  </label>

当组合框

 <select 
       ng-model="selectedItem"
       ng-options="selectedItem as selectedItem.name for selectedItem in list[localityTypeRadio]"
 ></select>

演示Fiddle

于 2013-10-23T07:16:38.657 回答