Angular遍历Radio选项,如何设置某个选项为默认选中状态?

  • talking ischeap,show me the code(不要逼逼,直接看代码)

<!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">{{item}}</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 = ['其他','医院','养老院'];
                $scope.viewModel = {};
            });
        </script>
    </body>
</html>
  • 运行效果
    图片描述


感谢@crazy4x 的评论,JS代码改成下面这样就可以了!

<script type="text/javascript">
    var testObj = angular.module('testApp',[]);
    testObj.controller("testCtr",function($scope){
        $scope.orgTypes = ['其他','医院','养老院'];
        $scope.viewModel = {};   //一定要先声明这个对象,否则赋值会报错
        $scope.viewModel.orgType = $scope.orgTypes[0];
    });
</script>
阅读 5.6k
2 个回答
$scope.viewModel={
    orgType = $scope.orgTypes[0]
}
<script type="text/javascript">
    var testObj = angular.module('testApp',[]);
    testObj.controller("testCtr",function($scope){
        $scope.orgTypes = ['其他','医院','养老院'];
        $scope.viewModel.orgType = $scope.orgTypes[0];
    });
</script>

写了之后,Angular遍历出错了

TypeError: Cannot set property 'orgType' of undefined
    at new <anonymous> (test4NgRadio.html:24)
    at Object.invoke (angular.js:4862)
    at $controllerInit (angular.js:10717)
    at nodeLinkFn (angular.js:9594)
    at compositeLinkFn (angular.js:8903)
    at compositeLinkFn (angular.js:8906)
    at publicLinkFn (angular.js:8768)
    at angular.js:1847
    at Scope.$eval (angular.js:18017)
    at Scope.$apply (angular.js:18117)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题