angular遍历radio选项

xixi_666

于 2022-04-02 11:07:22 发布

阅读量322

点赞数

分类专栏： js 文章标签：前端

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文详细探讨了在Angular中如何遍历并处理radio按钮组，包括数据绑定、事件监听和双向数据绑定等关键概念，旨在帮助开发者更好地掌握Angular中的表单控件操作。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Angular Radio测试</title>
        <script src="//cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
    </head>

    <body ng-app="testApp">
        <div class="form-group" ng-controller="testCtr">
            <label class="col-lg-3 col-sm-3 control-label">机构名称 ：</label>
            <div class="col-lg-9">
                <div class="form-group" ng-repeat="item in orgTypes">
                    <label><input type="radio" name="orgType" ng-model="viewModel.orgType" ng-value="item.val">{{item.txt}}</label>
                  </div>
                  <input value="{{viewModel.orgType}}" type="text" placeholder="你选中的类型是"/>
            </div>
        </div>
        <script type="text/javascript">
            var testObj = angular.module('testApp',[]);
            testObj.controller("testCtr",function($scope){
                $scope.orgTypes = [{val:'1',txt:'test1'},
                                   {val:'2',txt:'test2'},
                                   {val:'3',txt:'test3'}];
                $scope.viewModel = {};
                $scope.viewModel.orgType = $scope.orgTypes[0].val;
            });
        </script>
    </body>
</html>