angular.js - angularjs Bagaimana untuk melengkapkan pemilihan radio dengan satu set butang
PHPz
PHPz 2017-05-15 17:09:33
0
2
939

Terima kasih atas kerja keras anda, sila beritahu saya cara menggunakan set butang untuk membuat soalan pilihan tunggal. Terima kasih banyak!

Seperti yang ditunjukkan dalam gambar, anda perlu melakukan 2 perkara:

1 Selepas halaman dimuatkan, mengikut nilai yang dikembalikan domain:"8", tetapkan butang bertanda lalai dan kelas ikon dalam butang
2. dan berikan Klik butang untuk menambah kelas active

Rendering adalah seperti berikut (kini ia dibentuk secara langsung dengan menambah kelas)

Struktur data yang dikembalikan adalah seperti berikut

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

Struktur HTML adalah seperti berikut (pada masa ini ditulis oleh saya, tetapi hanya berbilang pilihan boleh dibuat)

     <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 adalah seperti berikut

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

学习是最好的投资!

membalas semua(2)
習慣沉默

Tentukan pembolehubah dan tetapkan nilai semasa kepadanya, kemudian buat pertimbangan dalam kelas Jika nilai = indeks, tambah gaya

过去多啦不再A梦

Gunakan format radio untuk melakukannya secara terus, cuma sembunyikan gaya lalai, dan kemudian buat kekecohan tentang gaya label yang sepadan

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan