Question

我已经创建了一个下拉列表：

<div class="form-group">
  <select class="form-control input-sm" id="sel1" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">
    <option value="yr">Yearly</option>
    <option value="qtr">Quarterly</option>
    <option value="mth">Monthly</option>                 
  </select>
</div>

但现在我正在尝试将其创建为按钮，但无法将其传递给控制器......

<div class="btn-group">
    <label class="btn btn-primary" ng-model="yAxistm" uib-btn-radio="yr" value="yr">Yearly</label>
    <label class="btn btn-primary" ng-model="yAxistm" uib-btn-radio="qtr" value="qtr">Quarterly</label>
    <label class="btn btn-primary" ng-model="yAxistm" uib-btn-radio="mth" value="mth">Monthly</label>
</div>

我在这里做错了什么？

--- --- EDIT

在我的控制器中，我使用ng-watch然后查看值的变化时间如下：

$scope.$watchGroup[('yAxistm1', 'chrtTyp'], function(newval, oldval) {
//do something
    });

Answer 1

尝试将字符串用作uib-btn-radio的值：

<div class="btn-group">
  <label class="btn btn-primary" ng-model="yAxistm" uib-btn-radio="'yr'" ng-change="updateCharts(yAxistm)">Yearly</label>
  <label class="btn btn-primary" ng-model="yAxistm" uib-btn-radio="'qtr'" ng-change="updateCharts(yAxistm)">Quarterly</label>
  <label class="btn btn-primary" ng-model="yAxistm" uib-btn-radio="'mth'" ng-change="updateCharts(yAxistm)">Monthly</label>
</div>

我也删除了value属性，我不认为这里需要它。

修改您也可以删除ng-change属性并通过在控制器中显示此表来更新图表：

$scope.$watch('yAxistm', function(newval, oldval) { //do something });

此版本已简化（不是watchGroup，因为我不知道chrtTyp是什么。基本上我只是修改了变量名。

Answer 2

这是使用ng-watch ...

的原因

<div class="btn-group-vertical" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="timeoptions" id="yr" autocomplete="off" checked value="yr" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Yearly
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="timeoptions" id="qtr" autocomplete="off" value="qtr" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Quarterly
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="timeoptions" id="mth" autocomplete="off" value="mth" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Monthly
    </label>
</div>

无法使用按钮和

2 个答案: