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>
相關文章
相關標籤/搜索