首页 / Angularjs / 正文

[Angularjs]Angularjs中使用ng-repeat动态生成radiog列表中怎么设置其中一项为默认选中状态呢?

5365 发布于: 2018-04-04 读完约需7分钟

问题描述

angularjs的开发中,我们有时候可能会使用ng-repeat指令动态生成一系列的单选框radio集合,如下:

<li ng-repeat="person in people">
    <label>{{person.name}}
        <input type="radio" name="name" required="required"/>
    </label>
</li>

那么,在angularjs的开发中,我们如何设置这个由ng-repeat动态生成的单选框列表的默认选中项呢?

方案一

使用ng-modelradiovalue值一致原则来选中默认的单选项,如下:

HTML:

<div ng-controller="MyCtrl">
    <section id="section_1">
      <p>Favorite Beatle:</p>
      <ul>
          <li ng-repeat="person in people">
              <label>{{person.name}}
                  <input type="radio" ng-model="$parent.favoriteBeatle"
                  name="name" value="{{person.name}}" required="required"/>
              </label>
          </li>
      </ul>
      <p>Your favorite Beatle is <strong>{{favoriteBeatle}}</strong>.</p>
    </section>
</div>

Angular.js:

function MyCtrl($scope) {
    $scope.people = [{
        name: "John"
    }, {
        name: "Paul"
    }, {
        name: "George"
    }, {
        name: "Ringo"
    }];
    $scope.favoriteBeatle = 'Paul';

    setTimeout(function () {
        $('input[value=George]').trigger('click');

    }, 2000);

    setTimeout(function () {
        $('input[value=George]').trigger('click');
    }, 4000);
}

方案二

使用ng-checked即可,如下:

HTML:

<div ng-controller="MyCtrl">
    <section id="section_2">
      <p>Favorite color:</p>
      <ul>
          <li ng-repeat="color in colors">
              <label>{{color.name}}
                  <input type="radio" ng-checked="(favoriteColor==color.name)"
                  name="color" ng-click="handleFavoriteColor(color)" ng-value="{{color.name}}" required="required"/>
              </label>
          </li>
      </ul>
    <p>Your favorite color is <strong>{{favoriteColor}}</strong>.</p>
    </section>
</div>

Angular.js:

function MyCtrl($scope) {   
    $scope.colors = [{
        name: "Red"
    }, {
        name: "Green"
    }, {
        name: "Blue"
    }, {
        name: "Yellow"
    }];

    $scope.favoriteColor ='Blue';

    $scope.handleFavoriteColor = function(color){
        $scope.favoriteColor =color.name;
    }
}

版权声明:本作品系原创,版权归码友网所有,如未经许可,禁止任何形式转载,违者必究。

上一篇: [.NET].NET/C#应用程序开发中复制/拷贝整个文件夹中的所有内容(文件&文件夹)的方法有哪些?

下一篇: VS Code发布4月更新,版本号为VS Code 1.22

本文永久链接码友网 » [Angularjs]Angularjs中使用ng-repeat动态生成radiog列表中怎么设置其中一项为默认选中状态呢?

分享扩散:

发表评论

登录用户才能发表评论, 请 登 录 或者 注册