号外号外: 原[图享网]更名为 码友网(codedefault.com) 啦,感谢大家一路上的陪伴与支持。代码的世界里,码友网与大家一起同行!

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

Angularjs 作者: Rector 383阅读 0评论 0收藏 收藏本文

郑重申明:本文未经许可,禁止任何形式转载

问题描述

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;
    }
}

阅读了该文章的人还浏览了...

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

发布于: 2018-04-04 14:20:09
分享扩散:

文章评论

获取验证码