角度標籤選中輸入

我想顯示標籤，當用戶點擊每個標籤時，標籤顏色將會改變，並且將所有選定的標籤放在隱藏的輸入內以供將來提交。角度標籤選中輸入

，您可以查看裏面的代碼的起點：http://plnkr.co/edit/Bq2JAqSAahQl6lWDVWvC?p=preview

的HTML：

<div ng-controller="TagsSelectCtrl"> 
    <div class="label label-default">man</div> 
    <div class="label label-default">woman</div> 
    <div class="label label-default">boys</div> 
    <div class="label label-default">girls</div> 
</div>

來源

2015-05-20 Tzook Bar Noy

我認爲你可以使用ng-repeat創建像下面的標籤，

在控制器

$scope.tags = ['man', 'woman', 'boys', 'girls'];

在HTML

<div class="label label-default" ng-repeat="tag in tags" 
    ng-click="clicked = !clicked; add(tag, clicked)" 
    ng-class="{'clicked-color': clicked}"> 

     {{ tag }} 

    </div>

如果點擊該標籤然後第一它創建在ng-repeat的範圍clicked變量和切換的clicked的值，然後在控制器調用add功能，

在控制器，

$scope.add = function(item, clicked) { 
    // if click is true then add a item to choosed tags 
    if(clicked) { 
    $scope.choseTags.push(item); 
    } else { 
    if click is false then remove the added item from the choosed tags 
    var index = $scope.choseTags.indexOf(item); 

    $scope.choseTags.splice(index, 1); 
    } 
}

最後ng-class

...ng-class="{'clicked-color': clicked}"

如果clicked爲真，則clicked-colorcss類添加到元素

這裏是live DEMO

來源

2015-05-20 11:18:46

它的工作太棒了！但有沒有辦法最大限度地減少html中的標籤的使用？像所有的ifs和「clicked =！clicked; add（tag，clicked）」東西？ –

角度標籤選中輸入

回答

相關問題