angulaire.js - angulairejs Comment compléter une sélection radio avec un ensemble de boutons

Question

Merci pour votre travail acharné, dites-moi comment utiliser un ensemble de boutons pour poser une question à sélection unique. Merci beaucoup !

Comme le montre l'image, vous devez faire 2 choses :

1. Une fois la page chargée, en fonction de la valeur renvoyée domain:"8", définissez le bouton coché par défaut et la classe d'icône dans le bouton
2. Cliquez sur un bouton, effacez les autres styles de bouton, et donnez Cliquez sur le bouton pour ajouter une classe active

Le rendu est le suivant (maintenant il est formé directement en ajoutant des classes)

La structure des données renvoyée est la suivante

{
 1: "健康",
 2: "法律",
 3: "心理",
 4: "医美", 
 5: "教育",
 6: "职场",
 7: "汽修", 
 8: "其他"}

La structure HTML est la suivante (actuellement écrite par moi, mais seules plusieurs sélections peuvent être effectuées)

     <ul class="tag-list button-select-group">
             <li ng-repeat="item in domainList">
                    <button type="button"
                            ng-class="{active:$index + 1 == defaultDomain}"
                            ng-click="checkDomain($index+1)"
                            ng-model="domain"
                            class="btn-item btn-domain aui-btn aui-btn-secondery aui-btn-block"
                            value="{{$index+1}}">
                        {{item}}
                        <span ng-class="{'fa fa-check-square':$index + 1 == defaultDomain}"></span>
                    </button>
                </li>
        </ul>

JS est le suivant

$scope.defaultDomain = data.domain;//服务器返回的domain字段数据
        $scope.checkDomain = function (id) {
        $scope.defaultDomain=id;
    }

Answer 1

Définissez une variable et attribuez-lui la valeur actuelle, puis faites un jugement dans la classe Si la valeur = index, ajoutez le style

.

Answer 2

Utilisez le format radio pour le faire directement, masquez simplement le style par défaut, puis faites toute une histoire sur le style du label correspondant