Question

是否有人能够在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>

Answer 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

是否可以直接在选择＆gt;上运行ng-switch。选项

1 个答案: