使用帶有ng-repeat的角度帶按鈕複選框

我正在嘗試使用http://mgcrea.github.io/angular-strap/#/buttons#buttons的複選框示例，但它似乎不適用於ng-repeat。使用帶有ng-repeat的角度帶按鈕複選框

無線電工作正常：

<div class="btn-group" ng-model="selectedData.locations" bs-radio-group> 
     <label class="btn btn-default" ng-repeat="item in data.locations"><input type="radio" class="btn btn-default" value="{{item.Id}}">{{item.Name}}</label> 
    </div>

但複選框不會

 <div class="btn-group" ng-model="selectedData.checkbox" bs-checkbox-group> 
     <label class="btn btn-default" ng-repeat="item in data.locations"><input type="checkbox" value="{{item.Id}}">{{item.Name}}</label> 
    </div>

這只是給出了一個按鈕和文本的「斷角」指示燈{{} item.Name }（包括方括號）而不是按鈕列表。

如果我將value="{{item.Id}}"更改爲value="item.Id"，那麼它可以工作，但它的工作方式類似於單選按鈕，模型看起來並未更新。

我懷疑問題出在value=""，但我不明白爲什麼它不起作用。

有什麼建議嗎？

編輯：這是一個工作plunker問題的例子。正如你可以看到收音機工作正常，最後一個例子（從角度帶示例）工作正常，但其他不。 checkbox3示例具有正確的行爲，但該模型未被更新。

來源

2015-02-17 DeclanMcD

你能舉一個http://plnkr.co/爲例嗎？ – 2015-02-17 21:08:05

@Leon Gaban - plunker示例添加了 – DeclanMcD 2015-02-18 09:34:36

複選框的值爲true或false。當您試圖將該值分配給一個數字ID時，會導致錯誤。在plunkr例子，該複選框值設置爲{{button.checkbox.left}}計算結果爲true或false

$scope.button = { 
"toggle": false, 
    "checkbox": { 
    "left": false, 
    "middle": true, 
    "right": false 
    }, 
    "radio": 1 
};

在HTML

<div class="btn-group" ng-model="button.checkbox" bs-checkbox-group> 
    <label class="btn btn-default"><input type="checkbox" value="{{button.checkbox.left}}"> Left</label>

看看這個小提琴：

http://jsfiddle.net/bmleite/PQvQ2/

看起來他們正在將標籤包裹在一個跨度中，移動ng-repeat

來源

2015-02-17 21:07:46

但這正是我所擁有的。它不起作用（加上沒有像item.value這樣的propery。 – DeclanMcD 2015-02-18 09:32:31

使用帶有ng-repeat的角度帶按鈕複選框

回答

相關問題