zoukankan      html  css  js  c++  java
  • 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
Copyright © 2011-2022 走看看