AngularJS中Radio Button的使用

ng-model指明双向绑定数据;ng-value指明单选按钮值,可动态修改;{{ }}相当于ng-bind,指数据单向绑定

<html ng-app="notesApp">
    <head>
        <meta charset="utf-8">
        <title>Notes App</title>
    </head>
    <body ng-controller="MainCtrl as ctrl">
        <div>
            <input type="radio"
                   name="gender"
                   ng-model="ctrl.user.gender"
                   ng-value="ctrl.genderV.male">{{ctrl.genderV.male}}
            <input type="radio"
                   name="gender"
                   ng-model="ctrl.user.gender"
                   ng-value="ctrl.genderV.female">{{ctrl.genderV.female}}
            <input type="radio"
                   name="gender"
                   ng-model="ctrl.user.gender"
                   ng-value="ctrl.genderV.gel">{{ctrl.genderV.gel}}
        </div>
        <script src="angular.min.js"></script>
        <script>
            angular.module('notesApp',[])
              .controller('MainCtrl',[function(){
                var self = this;
                this.user = {gender: '男'};
                this.genderV = {male:'男',female:'女',gel:'中性'}
                
              }]);
        </script>
    </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,661评论 0 3
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • 个人博客搭建完成,欢迎大家来访问哦黎默丶lymoo的博客 博主最近了解学习了一下angularJS,记录一下心得给...
    黎默丶lymoo阅读 1,060评论 0 21
  • AngularJS AngularJS概述 介绍 简称:ng Angular是一个MVC框架 其他前端框架: Vu...
    我爱开发阅读 2,349评论 0 8
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 6,103评论 0 42