Question

当我想在UI-bootstrap中使用带有“tab”的select部分时，我遇到了问题。观点部分：
请选择全国税基占市价比例

<select class="btn btn-default" ng-model="selectTaxPercentTaipei" 
    ng-options="taxPercent.option for taxPercent in taxPercents">
    <option value="">請選擇稅基佔市價比例</option>
</select>

<select class="btn btn-default" ng-model="selectTaxPercentNewTaipei" 
    ng-options="taxPercent.option for taxPercent in taxPercents">
    <option value="">請選擇稅基佔市價比例</option>
</select>

<select class="btn btn-default" ng-model="selectTaxPercentTaichung" 
    ng-options="taxPercent.option for taxPercent in taxPercents">
    <option value="">請選擇稅基佔市價比例</option>
</select>

<select class="btn btn-default" ng-model="selectTaxPercentTainan" 
    ng-options="taxPercent.option for taxPercent in taxPercents">
    <option value="">請選擇稅基佔市價比例</option>
</select>

<select class="btn btn-default" ng-model="selectTaxPercentKaoshung" 
    ng-options="taxPercent.option for taxPercent in taxPercents">
    <option value="">請選擇稅基佔市價比例</option>
</select>

和控制器：

$scope.$watch('selectTaxPercentTotal', function(newValue, oldValue) {
    alert(newValue);
    $scope.selectTaxPercentTaipei = newValue;
    $scope.selectTaxPercentNewTaipei = newValue;
    $scope.selectTaxPercentTaichung = newValue;
    $scope.selectTaxPercentTainan = newValue;
    $scope.selectTaxPercentKaoshung = newValue;
});

fomer部分可以很好地工作。当我选择选项并将值赋予ng-model

时

selectTaxPercentTotal

，

scope.selectTaxPercentTaipei scope.selectTaxPercentNewTaipei       
scope.selectTaxPercentTaichung scope.selectTaxPercentTainan
scope.selectTaxPercentKaoshung

将所有值都更改为selectTaxPercentTotal

使用带有“标签”的UI引导程序时出现问题。

<tab heading="Total">
    <select class="btn btn-default" ng-model="selectTaxPercentTotal" 
        ng-options="taxPercent.option for taxPercent in taxPercents">
        <option value="">請選擇全國稅基佔市價比例</option>
    </select>
</tab>

<tab heading="Taipei">
    <select class="btn btn-default" ng-model="selectTaxPercentTaipei" 
        ng-options="taxPercent.option for taxPercent in taxPercents">
        <option value="">請選擇稅基佔市價比例</option>
    </select>
</tab>

<tab heading="NewTaipei">
    <select class="btn btn-default" ng-model="selectTaxPercentNewTaipei" 
        ng-options="taxPercent.option for taxPercent in taxPercents">
        <option value="">請選擇稅基佔市價比例</option>
    </select>
</tab>

<tab heading="Taichung">
    <select class="btn btn-default" ng-model="selectTaxPercentTaichung" 
        ng-options="taxPercent.option for taxPercent in taxPercents">
        <option value="">請選擇稅基佔市價比例</option>
    </select>
</tab>

<tab heading="Tainan">
    <select class="btn btn-default" ng-model="selectTaxPercentTainan" 
        ng-options="taxPercent.option for taxPercent in taxPercents">
        <option value="">請選擇稅基佔市價比例</option>
    </select>
</tab>

<tab heading="Kaochung">
    <select class="btn btn-default" ng-model="selectTaxPercentKaoshung" 
        ng-options="taxPercent.option for taxPercent in taxPercents">
        <option value="">請選擇稅基佔市價比例</option>
    </select>
</tab>

Then, the $watch doesn't works. Now I select the value for the ng-model="selectTaxPercentTotal", and the others can not change.

Someone can tell me how to modify my code?plz Orzzz

Answer 1

ui-bootstrap的tab指令将为每个选项卡创建一个嵌套的子范围，因此每个<select>标记的范围将与控制器中的范围不同。

这就是为什么当你为scope.selectTaxPercentTaipei和朋友分配一个值时，它没有效果。

要避免此问题，您可以在绑定中使用点符号，例如model.selectTaxPercentTotal：

<tab heading="Total">
    <select class="btn btn-default" ng-model="model.selectTaxPercentTotal" 
        ng-options="taxPercent.option for taxPercent in taxPercents">
        <option value="">請選擇全國稅基佔市價比例</option>
    </select>
</tab>

并在控制器中：

$scope.model = {};

$scope.$watch('selectTaxPercentTotal', function(newValue, oldValue) {
    $scope.model.selectTaxPercentTaipei = newValue;
    $scope.model.selectTaxPercentNewTaipei = newValue;
    $scope.model.selectTaxPercentTaichung = newValue;
    $scope.model.selectTaxPercentTainan = newValue;
    $scope.model.selectTaxPercentKaoshung = newValue;
});

希望这有帮助。

$ watch在使用UI引导程序时没有工作（角度）

1 个答案: