AngularJS radio绑定与取值

<div id="commentModal" class="modal fade" role="dialog" ng-app="radioApp" >
    <div class="modal-dialog" ng-controller="radioCtrl as vm">
        <div class="modal-content">
            <div class="modal-header">
                <h4>评价内容</h4>
            </div>
            <div class="modal-body">
                满意程度
                <!--选项都绑定在commentGrade字段上,同时自己有自己的value,则commentGrade=选中的value值-->
                <label><input name="Satisfaction" type="radio" value="1" ng-checked="true" ng-model="vm.commentGrade" />满意 </label>
                <label><input name="Satisfaction" type="radio" value="2" ng-model="vm.commentGrade" />一般 </label>
                <label><input name="Satisfaction" type="radio" value="3" ng-model="vm.commentGrade" />差评 </label>
            </div>
            <div class="modal-body">
                <textarea placeholder="请填写评价内容" ng-model="vm.commentContent"></textarea>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary blue" ng-click="vm.comment()"> <span>提交</span></button>
                <button type="button" class="btn btn-default">取消</button>
            </div>
        </div>
    </div>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script>
        var app = angular.module("radioApp", []);
        app.controller("radioCtrl",
        [
            "$scope", "$http",
            function ($scope, $http) {
                var vm = this;
                //评价内容
                vm.commentContent = "";
                //评价等级
                vm.commentGrade = 1;

                vm.comment = function () {
                    debugger;
                    var commentGradeStr = "";
                    if (vm.commentGrade == 1)
                        commentGradeStr = "满意";
                    else if (vm.commentGrade == 2)
                        commentGradeStr = "一般";
                    else
                        commentGradeStr = "差评";
                    alert('你选择的满意程度是:' + commentGradeStr + ",填写的评论内容是:" + vm.commentContent);
                };
            }
        ]);
</script>

转载于:https://www.cnblogs.com/Lulus/p/7874095.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值