Флажок в AngularJS

Мы хотим иметь набор взаимоисключающих флажков и хотим реализовать эту логику на клиенте (angularjs), чтобы пользователь мог получить немедленную отзывчивую обратную связь об их выборе. Как правило, взаимная эксклюзивность обеспечивается с помощью переключателей, обеспечивающих знакомство пользователей с выбором интерфейса. Однако в этом конкретном случае предположим, что в определенной подкатегории пользователь может выбрать столько параметров, сколько захочет, но не может выбирать опции из более чем одной подкатегории. Представьте, что параметры контакта заданы как Нет или какой-либо тип Да. Или, возможно, есть онлайн-форма заказа на питание, где определенные варианты выбора являются взаимоисключающими между категориями.Флажок в AngularJS

источник

2015-03-16 Amit Sinha

Пожалуйста, покажите код, что вы пробовали до сих пор. –

Атрибут ng-change для флажка позволяет присоединить вызов функции или выражение к изменению флажка. Используя это, вы можете отменить выбор, которые являются взаимоисключающими для тех, которые вы проверяете, это может быть не оптимальным, но оно действительно работает. Вероятно, вы могли бы добавить дополнительный код, чтобы сделать это более информативным, но следующее должно работать нормально.

Javascript:

var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope) { 



$scope.SelectedANumber=function(){ 
    $scope.redIsFavored=false; 
    $scope.yellowIsFavored=false; 
    $scope.blueIsFavored=false; 
    }; 

    $scope.SelectedAColor=function(){ 
    $scope.oneIsFavored=false; 
    $scope.twoIsFavored=false; 
    $scope.threeIsFavored=false; 
    }; 

    $scope.SelectedAColor(); 
    $scope.SelectedANumber(); 
});

HTML:

<!DOCTYPE html> 
<html ng-app="plunker"> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script> 
    <script src="app.js"></script> 
</head> 

<body ng-controller="MainCtrl"> 
    <p>Choose your favorite colors or your favorite numbers</p> 
    <div> 
    <label>Colors</label> 
    <br/> 
    <input type="checkbox" ng-model="redIsFavored" ng-change="SelectedAColor()">Red 
    <br/> 
    <input type="checkbox" ng-model="yellowIsFavored" ng-change="SelectedAColor()">Yellow 
    <br/> 
    <input type="checkbox" ng-model="blueIsFavored" ng-change="SelectedAColor()">Blue 
    <br/> 
    <br/> 
    <label>Numbers</label> 
    <br/> 
    <input type="checkbox" ng-model="oneIsFavored" ng-change="SelectedANumber()">1 
    <br/> 
    <input type="checkbox" ng-model="twoIsFavored" ng-change="SelectedANumber()">2 
    <br/> 
    <input type="checkbox" ng-model="threeIsFavored" ng-change="SelectedANumber()">3 
    <br/> 
    </div> 
    <br/>Colors Selected: 
    <br/>Red: {{redIsFavored}} 
    <br/>Yellow: {{yellowIsFavored}} 
    <br/>Blue: {{blueIsFavored}} 
    <br/> 
    <br/>Numbers Selected: 
    <br/>1: {{oneIsFavored}} 
    <br/>2: {{twoIsFavored}} 
    <br/>3: {{threeIsFavored}} 
    <br/> 

</body> 

</html>

Рабочий пример можно найти Here

источник

2015-03-16 15:18:45 Mark

Флажок в AngularJS

ответ

Смежные вопросы