angular 单选框

最新推荐文章于 2023-08-30 19:27:49 发布

转载最新推荐文章于 2023-08-30 19:27:49 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guofan/p/7826574.html

文章标签：

#javascript #ViewUI

进行参数配置的时候，单选是很常见的选项，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>