编写 buttonsRadio directivies

最新推荐文章于 2017-03-09 17:53:42 发布
最新推荐文章于 2017-03-09 17:53:42 发布
阅读量560 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angularjs/article/details/8781270
版权
本文主要展示怎样用directives实现buttons radio，直接上代码编写 <wbr>buttonsRadio <wbr>directivies
buttons-radio.html

<!doctype html>
<html lang="en" ng-app="buttonsRadio">
<head>
      <link href="../bootstrap.css" rel="stylesheet"/>
      <script type="text/javascript" src="../jquery.js"></script>
      <script type="text/javascript" src="../bootstrap.js"></script>
      <script type="text/javascript" src="../angular.js"></script>
      <script type="text/javascript" src="buttons-radio-controller.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
      <div class="span6">
            <br>
            <strong>myModel: </strong>
            <code> {{myModel}} </code>
            <hr>
            <div>
                  <input name="test" type="radio" ng-model='myModel' value="Left"> Left<br>
                  <input name="test" type="radio" ng-model='myModel' value="Middle"> Middle<br>
                  <input name="test" type="radio" ng-model='myModel' value="Right"> Right<br>
            </div>
            <hr>
            <buttons-radio class="btn-group" data-toggle="buttons-radio" model='myModel' options='myOptions'></buttons-radio>
      </div>
</div>
</body>
</html>

buttons-radio-controller.js

"use strict";

function MainCtrl($scope) {
      $scope.myOptions = ["Left", "Middle", "Right"];
      $scope.myModel = "Left"

      $scope.$watch('myModel', function(v){
            console.log('changed', v);
      });
}

angular.module('buttonsRadio', [])
      .directive('buttonsRadio', function() {
            return {
                  restrict: 'E',
                  scope: { model: '=', options:'='},
                  controller: function($scope){
                        $scope.activate = function(option){
                              $scope.model = option;
                        };
                  },
                  template: "<button type='button' class='btn' "+
                        "ng-class='{active: option == model}'"+
                        "ng-repeat='option in options' "+
                        "ng-click='activate(option)'>{{option}} "+
                        "</button>"
            };
      });

测试本代码时，注意将引入的resources放到上级目录，或更改html中resouces的location。

对buttonsRadio directives的解释：
restrict ： 代码中我们使用了"E"属性，表示创建此directive将创建一个element
scope:一般用于从controller中获取$scope中的一些值
angularjs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
『前端日志』基于Bootstrap框架实现单选按钮组
mad_house的博客
12-24 1585
目标：生成连在一起的三个按钮，点击任意一个按钮，该按钮会显示按下的样式，而另外两个按钮是未按下的样式。同时，为三个按钮分别添加触发函数。 问题：其实是参考的别人的代码，只是不太好找，所以记录一下。 代码： <!--以input和label实现的单选按钮组--> <div style="float : right" class="btn-gr...
AD学习笔记----原理图设计
weixin_30794491的博客
12-23 2584
1. 1mil=0.0254mm 2.　　在制作原理图库和PCB库是，将原理图和PCB封装对应的时候，一定要记得把原理图库中的 Designator 的值和PCB封装中的Designtor的值对应，即一样； 　　　不然在生成集成库的时候就会出错（Eg:could not find port "2"from on model "STC89C52" for pin "2",PCB...
<form:radiobuttons>单选按钮i-check选中触发
小静的专栏
03-09 9810
//单选按钮选中触发 $('.carries_type').on('ifChecked', function(event){ debugger; alert($(event.target).val()); }); 获取当前选中单选按钮的value
buttonsRadio directivies
wjxbj的博客
04-05 76
本实例主要展示怎样用directives实现buttons radio。 AngularButtonDirective.html &lt;!doctype html&gt; &lt;html lang="en" ng-app="BJButtionDirective"&gt; &lt;head&gt; &lt;script src="lib/jquery-1.9.1.js"
Radio Buttons（单选按钮）
莫高雷草原
04-18 1848
单选按钮 单选按钮允许用户从一组选项中选择其中某个选项。如果你认为有必要让用户并排看到所有可选项，并且对这组可选项来说只能有一个被选中，那么单选按钮将是个不错的选择。如果没有必要并排显示所有的选项，那么可以使用 spinner 来代替。 在你的布局中通过创建 RadioButton 标签来创建单选按钮选项。然而，由于单选按钮之间是互斥的，所以你必须把他们集合到一个 RadioG
JAVA-WEB团队开发组交接文档编写规范
03-21
JAVA-WEB团队开发组交接文档编写规范,特点：便于团队代码开发管理规范，简洁，清楚，明了。
编写可维护的JavaScript，完整扫描版
03-13
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript 代码，书中详细说明了作为团队一分子，应该怎么写JavaScript。《编写可维护的JavaScript》内容涵盖了编码风格、编程...
MFC编写天气预报
01-10
在本文中，我们将深入探讨如何使用Microsoft Foundation Class (MFC) 框架来编写一个天气预报的小程序。MFC是微软为Windows平台提供的一种C++库，它封装了Windows API，使得开发者能够更容易地创建桌面应用程序。在...
C#编写CAN上位机
11-15
项目中需要使用UART、CAN、LAN三种接口与下位机进行通讯，前面已经编写好MODBUS的上位机，目前想将三种合为一个工程，该代码完全实现CAN，其他两种只是预留了框架。 该上位机需要搭配周立功的CAN分析仪使用。
编写有效用例.pdf
02-02
编写有效用例.pdf 编写有效用例.pdf
开题报告达达宠物认领信息网站的设计与实现 已通过开题答辩的.docx
07-25
宠物认领信息网站的主要目的是为寻找宠物的失主和寻找新家的宠物提供一个在线的信息交流平台。通过这个平台，失主可以发布失宠信息，寻找走失或遗弃的宠物；而救助人或组织则可以发布待领养的宠物信息，为那些无家可归的宠物寻找一个永久的归宿。 这样的网站通常会提供一个详细的宠物数据库，包括照片、品种、年龄、健康状况等信息，以便让失主能够方便地找到自己的宠物。同时，网站还会提供一些相关的服务，如失主与救助人之间的在线交流、宠物匹配推荐、领养手续办理等，以帮助双方顺利完成宠物的认领和领养过程。 宠物认领信息网站的目的在于提高失宠找到宠物的几率，减少流浪宠物的数量，并为那些无家可归的宠物提供一个温馨的新家。同时，网站还能促进社会对流浪宠物的关注和保护，提高人们的动物保护意识。
开题报告创权法律服务系统 已通过开题答辩的.doc
07-25
进入20世纪80年代，我国加快了改革开放的步伐，市场经济体制已逐步形成，我国的经济发展受世人所瞩目，但法律法规的置后，使经济发展不规范问题暴露的相当严重，特别是社会整体信用的缺失，使消费环境不断恶化。而如今随着城镇化的高速推进，精神追求远不及物质发展迅速，维权问题也越来越成为人们十分关注的社会话题。 维权是指维护个人或群体的合法权益，范围包括人身损害、土地纠纷、 医疗事故、婚姻、家庭、继承等民事纠纷所进行的行政及司法诉讼。维护消费者合法权益关系着全社会每个人的利益，群众利益无小事。维护消费者合法权益正体现着“权为民所用，利为民所谋”。而现如今由于法律规则的不完善加上自身对法律知识的不了解，导致很多公民的权益问题在复杂的社会情况下无法得到妥善的解决，使得公民的财产和心理受到难以弥补的损失，严重威胁到社会的安全与稳定，公民之间的诚信与统一。因此更便捷、迅速地维护公民的合法权益，已经成为了一个刻不容缓去解决的社会问题。
Matlab实现豪猪优化算法CPO-TCN-Multihead-Attention多输入单输出回归预测算法研究.rar
07-25
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
人力资源-6 团结一致共创未来新员工座谈会.pptx
07-25
人力资源-6 团结一致共创未来新员工座谈会.pptx
《AI大模型应用》--基于PepperBot，可以保留上下文的LLM群聊机器人实现.zip
07-25
上接OpenAI、文心一言，下接QQ、微信、Telegram 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
开题报告传统糕点 已通过开题答辩的.docx
07-25
理论意义： 1、网页设计是信息传播的重要手段，通过合理的布局、图文搭配等设计元素，可以更好地传递传统糕点的信息。理论上，这涉及到传播学、信息传递模型等方面的理论研究，确保信息能够被受众准确、清晰地接收。 2、用户体验理论强调用户与网页之间的交互和感知。在传统糕点推广网页设计中，理论上的考虑应该包括用户友好的界面、易于导航的网站结构，以及引导用户深入了解传统糕点的设计元素。
GBT 2423.1-2008-试验A-低温
最新发布
07-25
GBT 2423.1-2008-试验A-低温
2500多个AI工具合集包括视频自动剪辑、AI视频生成、AI教程、视频换脸、图片生成等待
07-25
概述： 在这个数字化时代，人工智能（AI）工具正迅速成为创意和生产力的强大推动力。我们的AI工具合集汇集了超过2500个工具，覆盖视频自动剪辑、AI视频生成、AI教程、视频换脸、图片生成等多个领域，为创意专业人士和爱好者提供了一个全面的解决方案。 特点： 视频自动剪辑： 利用先进的AI算法，自动识别并剪辑视频内容，节省编辑时间，提高效率。 AI视频生成： 创造全新的视频内容，无需实际拍摄，AI可以根据脚本或概念生成逼真的视频。 AI教程： 提供各种AI工具的使用教程，帮助用户快速掌握工具的使用技巧。 视频换脸： 通过深度学习技术，实现视频中人物面部的替换，为视频制作增添更多可能性。 图片生成： 根据用户输入的描述自动生成图片，为设计和创意工作提供灵感。 应用领域： 电影和电视制作 广告和营销 社交媒体内容创作 游戏开发 教育和培训 优势： 高效率： AI工具可以大幅度提高工作流程的速度。 易用性： 即使是初学者也能快速上手使用这些工具。 创新性： AI的创造力可以帮助用户实现前所未有的创意效果。 成本效益： 相比传统方法，AI工具可以降低生产成本。
毕业设计javajsp高校科研项目管理系统sqlserver-qr源码含文档工具包
07-25
毕业设计javajsp高校科研项目管理系统sqlserver-qr源码含文档工具包 页面是jsp，数据库sqlserver，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 教师科研与论文信息交流平台 课题申报 感研申报 修改个人信息 查询成果申报 查询课题申报 未入库课题/成果 已入库课题成果 研审批 信息统计 查看用户信息 添加用户信息 按作者查询 信息查询 按日期查询 按关键字查询 按类型查动 包含：源码、数据库脚本、论文、答辩ppt、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
通达信技术指标公式全解析及编写指南
"通达信指标公式编写教程[完整版].pdf" 通达信是一款广泛使用的股票分析软件，它的强大之处在于用户可以根据自己的需求编写各种技术指标公式、条件选股公式、交易系统公式以及五彩K线公式。本教程旨在帮助用户深入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值