1. <div id="commentModal" class="modal fade" role="dialog" ng-app="radioApp" >
  2. <div class="modal-dialog" ng-controller="radioCtrl as vm">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <h4>评价内容</h4>
  6. </div>
  7. <div class="modal-body">
  8. 满意程度
  9. <!--选项都绑定在commentGrade字段上,同时自己有自己的value,则commentGrade=选中的value值-->
  10. <label><input name="Satisfaction" type="radio" value="1" ng-checked="true" ng-model="vm.commentGrade" />满意 </label>
  11. <label><input name="Satisfaction" type="radio" value="2" ng-model="vm.commentGrade" />一般 </label>
  12. <label><input name="Satisfaction" type="radio" value="3" ng-model="vm.commentGrade" />差评 </label>
  13. </div>
  14. <div class="modal-body">
  15. <textarea placeholder="请填写评价内容" ng-model="vm.commentContent"></textarea>
  16. </div>
  17. <div class="modal-footer">
  18. <button type="submit" class="btn btn-primary blue" ng-click="vm.comment()"> <span>提交</span></button>
  19. <button type="button" class="btn btn-default">取消</button>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  1. <script src="~/Scripts/angular.min.js"></script>
  2. <script>
  3. var app = angular.module("radioApp", []);
  4. app.controller("radioCtrl",
  5. [
  6. "$scope", "$http",
  7. function ($scope, $http) {
  8. var vm = this;
  9. //评价内容
  10. vm.commentContent = "";
  11. //评价等级
  12. vm.commentGrade = 1;
  13. vm.comment = function () {
  14. debugger;
  15. var commentGradeStr = "";
  16. if (vm.commentGrade == 1)
  17. commentGradeStr = "满意";
  18. else if (vm.commentGrade == 2)
  19. commentGradeStr = "一般";
  20. else
  21. commentGradeStr = "差评";
  22. alert('你选择的满意程度是:' + commentGradeStr + ",填写的评论内容是:" + vm.commentContent);
  23. };
  24. }
  25. ]);
  26. </script>

AngularJS radio绑定与取值的更多相关文章

  1. jsf初学selectOneMenu 绑定与取值

    jsf 的selectOneMenu 最后生成的<select>标签.这里涉及到一个binding 起初一直不知道是干嘛的,后来参考了其他文章.就相当于在asp.net 中如:<as ...

  2. Silverlight的ComboBox 的绑定和取值

    Silverlight的ComboBox与winform中的ComboBox存在类似的地方,但也有不同之处,本章包含以下内容: 一.ComboBox 如何添加和绑定数据. 二.ComboBox 如何添 ...

  3. easyui radio 类型的取值和赋值方法

    1.HTML 文件 <tr id="client_check1"> <th>委托人证件类型:</th> <td><input ...

  4. angularJS之ng-bind与{{}}取值的区别

    1:{{ }} 是等页面加载完后,再取值. 2:ng-bind 它是在页面加载的时候,是不会显示{{name}}这种变量出来. 3:ng-bind 可以解决 ng 页面闪烁加载问题. 4:ng-bin ...

  5. jquery 监听radio选中,取值

    $(document).ready(function(){ $("input[name=discount]").each(function(){ $(this).click(fun ...

  6. 关于MVC视图下拉菜单绑定与取值的问题

    绑定视图中dropdownlist: 视图中的代码: @Html.DropDownList("select1") 此处的slect1也就是页面上的<select>< ...

  7. jQuery radio|checkbox的取值与赋值

    文章简单即是美[我说的是技术博客] |--radio   |--checkbox   参考: http://blog.csdn.net/gd2008/article/details/6951208 h ...

  8. 通过编写串口助手工具学习MFC过程——(十)UpdateData()用法和编辑框的赋值、取值

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  9. jQuery对html元素的取值与赋值实例详解

    jQuery对html元素的取值与赋值实例详解 转载  2015-12-18   作者:欢欢   我要评论 这篇文章主要介绍了jQuery对html元素的取值与赋值,较为详细的分析了jQuery针对常 ...

随机推荐

  1. runtimeException也是能够捕获的

    如题, 运行结果: bbb abcdef @Test public void testRuntimeException() { ; try { aaa333(); } catch (Exception ...

  2. [Angular] Auxiliary named router outlets

    Define a auxilliary router: export const ROUTES: Routes = [ { path: 'folder/:name', component: MailF ...

  3. Objective-C基础笔记(8)Foundation经常使用类NSString

    一.创建字符串的方法 void stringCreate(){ //方法1 NSString *str1 = @"A String!"; //方法2 NSString *str2 ...

  4. 关于CoordinatorLayout与Behavior的一点分析

    Behavior是Android新出的Design库里新增的布局概念.Behavior只有是CoordinatorLayout的直接子View才有意义.可以为任何View添加一个Behavior.Be ...

  5. php实现 密码验证合格程序(复杂问题分类,超简单的)(分类+规范编码)

    php实现 密码验证合格程序(复杂问题分类,超简单的)(分类+规范编码) 一.总结 一句话总结:复杂问题分类,超简单的.分类+规范编码. 1.写的时候判断  不能有相同长度超2的子串重复  的时候,子 ...

  6. jquery的mouseover和mouseout闪烁问题

    $(document).ready(function(){ $(".anli").hover( function(){ var $div = $(this); t = setInt ...

  7. Ajax方法

    json的解析: json是js原生的内容,也就意味着js可以直接取出json对象中的数据. 案例一: var persons = [ {"firstname":"张&q ...

  8. RFC chinese

    rfc专业性强,现实中不可能有好的全的rfc的翻译 尝试上在github上搜索 https://github.com/tidyjiang8/6lowpan-rfcs-chinese 诚如作者所说: 在 ...

  9. 利用huson的日志获取编译错误信息的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 使用hudson编译一百多个VC工程,输出的日志有6M之大,摆在我面前的一个问题是如何利用这个日志信息来获取编译错误信 ...

  10. 【hdu 3951】Coin Game

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...