угловые метки, выбранные для ввода

Question

Я хотел бы показывать теги, и когда пользователь нажимает на каждый из них, цвет тега будет меняться и будет иметь все выбранные теги внутри скрытого ввода для последующей отправки.

Вы можете просмотреть запуск кода внутри: 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> 

Answer 1

я думаю, что вы можете использовать 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> 

, если нажать на теге сначала создать clicked переменное определение области ng-repeat «s и переключить значение 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