angular 单选框

进行参数配置的时候,单选是很常见的选项,input 提供了一个单选按钮类型方便单选使用,那么该如何结合 angular 来使用呢?

<!DOCTYPE html>
<html ng-app='myApp'>
    <head>
        <meta charset='utf-8'>
        <script src='angular.js'></script>
        <script src='jquery-1.11.3.js'></script>
    </head>
    <body>
        <div ng-controller='myCtrl'>
            <div>Are you happy ?</div>
            <div>
                <label>
                    <input type="radio" ng-model="isHappy" name='isHappy' ng-value='true' ng-change="isHappyFnc(true)">
                    <span>Yes</span>
                </label>
                <label>
                    <input type="radio" ng-model="isHappy" name='isHappy' ng-value='false' ng-change="isHappyFnc(false)">
                    <span>No</span>
                </label>
            </div>
            <div>{{message}}</div>
        </div>
        <script>
            angular.module("myApp",[])
            .controller("myCtrl",function($scope, $timeout){
                $scope.isHappy = true;
                $scope.message = 'Please select !';
                
                $scope.isHappyFnc = function (value) {
                    if(value) {
                        $scope.message = 'Very Happy !';
                    }else {
                        $scope.message = 'bad mood !';
                    }
                }
            })
        </script>
    </body>
</html>
原文地址:https://www.cnblogs.com/guofan/p/7826574.html