[英]How to make the Twitter Bootstrap Glyphicons work with Wordpress?
[英]How to make Twitter Bootstrap button groups work with AngularJS?
我正在嘗試創建一個簡單的twitter bootstrap按鈕組 ,允許用戶選擇幾個選項之一(想想單選按鈕)。 我已經達到了影響模型變化的程度,但“活動”狀態沒有正確設置為onclick ...除非我再次點擊它? 我創造了一個小提琴 ,基本標記如下......
<div range="justified"
model="myModel"
options="rangeOptions"></div>
<hr/>
<div range="vertical"
model="myModel"
options="rangeOptions"></div>
<hr/>
<pre>myModel:{{myModel}}</pre>
<script type="text/ng-template" id="range.tpl.html">
<div class="btn-group btn-group-{{type}}" data-toggle="buttons">
<span class="btn btn-lg btn-primary"
ng-repeat="option in options"
ng-class="{active:option.id==model.range_id}" <!-- not working?? -->
ng-click="activate(option.id)">{{option.label}}</span>
</div>
</script>
function Main($scope) {
$scope.rangeOptions = [
{id:1,label:"Agree"},
{id:2,label:"Neutral"},
{id:3,label:"Disagree"}
];
$scope.myModel = {range_id: 2};
}
angular
.module('range', [])
.directive('range', function () {
return {
replace: true,
scope: { type:'@range', model:'=', options:'=' },
templateUrl:'range.tpl.html',
controller: function ($scope,$element,$attrs) {
$scope.activate = function (option) {
$event.preventDefault();
};
}
};
});
你不需要90%的bootstrap js來實現這樣的工作你需要做的就是創建一個按鈕組並附加一些ng-click和ng-class:
function myscope($scope) {
$scope.button = 'red';
}
<div class="btn-group">
<a href="javascript:void(0)" ng-click="button = 'red'" ng-class="{ 'active' : button == 'red' }" class="btn">red</a>
<a href="javascript:void(0)" ng-click="button = 'blue'" ng-class="{ 'active' : button == 'blue' }" class="btn">blue</a>
<a href="javascript:void(0)" ng-click="button = 'green'" ng-class="{ 'active' : button == 'green' }" class="btn">green</a>
</div>
這里有一些關於使您的按鈕組作為單選按鈕工作的其他信息。
http://getbootstrap.com/javascript/#buttons
使用該信息,我分叉你的小提琴,這似乎是有效的。
更改只是將span元素切換為標簽/輸入。
<div class="btn-group btn-group-{{type}}" data-toggle="buttons">
<label class="btn btn-lg btn-primary"
ng-repeat="option in options"
ng-class="{active:option.id==model.range_id}"
ng-click="activate(option.id)"><input type="radio"></input>{{option.label}}</label>
</div>
如果你不介意放棄一點時髦的引導樣式,你可以通過簡單地取出data-toggle標簽來解決這個問題。
<div ng-app>
<h1>{{color}}</h1>
<form>
<div>
<label>Select a Color</label>
</div>
<div class="btn-group">
<label class="btn btn-primary">
<input type="radio" name="color" data-ng-model="color" value="'red'"> Red
</label>
<label class="btn btn-primary">
<input type="radio" name="color" data-ng-model="color" value="'green'"> Green
</label>
<label class="btn btn-primary">
<input type="radio" name="color" data-ng-model="color" value="'blue'"> Blue
</label>
<label class="btn btn-primary">
<input type="radio" name="color" data-ng-model="color" value="'black'"> Black
</label>
<label class="btn btn-primary">
<input type="radio" name="color" data-ng-model="color" value="'orange'"> Orange
</label>
</div>
</form>
</div>
從父div中省略data-toggle =“buttons”,並在設置屬性width的輸入中添加一個類或樣式:0px和visibility:hidden。
要將按鈕顯示為活動按鈕,請使用ng-init,ng-click和ng-class切換活動類。
<label>Location</label><br/>
<div class="btn-group" ng-init="selectedButton = 'all'">
<label class="btn btn-default active" ng-class="{'active':selectedButton === 'all'}" ng-click="selectedButton = 'all'">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="all" ng-model="filterData.locations" checked style="visibility:hidden; width:0px;" > All Locations
</label>
<label class="btn btn-default" ng-class="{'active':selectedButton === 'boroughs'}" ng-click="selectedButton = 'boroughs'">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="boroughs" ng-model="filterData.locations" style="visibility:hidden; width:0px;" > Boroughs
</label>
<label class="btn btn-default" ng-class="{'active':selectedButton === 'depots'}" ng-click="selectedButton = 'depots'">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="depots" ng-model="filterData.locations" style="visibility:hidden; width:0px;" > Depots
</label>
</div>
我找到了直接從控制器中的數組處理它的角度方式。
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-tertiary" ng-class="{active: availableOption === searchFieldsContent.searchOption}" ng-repeat="availableOption in searchOptions">
<input type="radio" name="searchOption" id="searchOption{{$index}}" ng-model="searchFieldsContent.searchOption" ng-value="availableOption">{{availableOption.name}}</input>
</label>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.