本实例主要展示怎样用directives实现buttons radio。
AngularButtonDirective.html
<!doctype html>
<html lang="en" ng-app="BJButtionDirective">
<head>
<script src="lib/jquery-1.9.1.js"></script>
<script src="lib/angular.js"></script>
<script type="text/javascript" src="js/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('BJButtionDirective', []).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>"
};
});
运行效果：
点击单选项，模型发生改变
点击指令写的buttons radio，效果一样
控制台输出信息如下：
实际我们在开发过程中，在指令中一般用link，即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('BJButtionDirective', []).directive('buttonsRadio', function() {
return {
restrict: 'E',
scope: {
model: '=',
options:'='
},
link: function(scope, el, attrs){
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>"
};
});
对buttonsRadio directives的解释：
restrict：代码中我们使用了"E"属性，表示创建此directive将创建一个element
scope:一般用于从controller中获取$scope中的一些值或进行数据的通信
a.'='表示指向同一个引用，即指令中对模型的改变，会直接改变到指令外面同模型
b.‘@表示使用此指令时，使用的地方向指令中传递值给指令，它是单向的，只支持String
c.事件通知，指令通知外面
当然，上面指令在兼容IE8和IE8以下的版本中不能正常运行，需修改元素标签指令为属性标签，如下所示：
AngularButtonDirective.html
<!doctype html>
<html lang="en" ng-app="BJButtionDirective">
<head>
<script src="lib/jquery-1.9.1.js"></script>
<script src="lib/angular.js"></script>
<script type="text/javascript" src="js/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>
<span buttons-radio="" class="btn-group" data-toggle="buttons-radio" model='myModel' options='myOptions'></span>
</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('BJButtionDirective', []).directive('buttonsRadio', function() {
return {
restrict: 'A',
scope: {
model: '=',
options:'='
},
link: function(scope, el, attrs){
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>"
};
});
相关推荐
【资源说明】 果壳处理器研究小组(Topic基于RISCV64果核处理器的卷积神经网络加速器研究)详细文档+全部资料+优秀项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；
资源说明：https://blog.csdn.net/m0_38106923/article/details/144637354 一分价钱一分货，项目代码可顺利编译运行~
有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。 环境说明： 开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上 数据库工具：Navicat11及以上 开发软件：eclipse/idea Maven包：Maven3.3及以上
【资源说明】 基于python3+selenium+unittest的WebUI自动化测试框架，使用POM(页面对象模型)设计模式，适合几乎所有web项目，可集成Jenkins部署自动化测试资料齐全+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
智能车开发案例，使用Python语言在一个文件中实现。这里我们将添加一些额外的功能，如自动驾驶模式、避障、超声波传感器读取以及通过TCP/IP网络远程控制。 首先，确保你已经安装了pyserial、socket库： pip install pyserial
屏幕截图 2024-12-21 165859
电缆、树木检测15-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rarPL + VG-V4 2024-01-04 6:04 PM ============================= *与您的团队在计算机视觉项目上合作 *收集和组织图像 *了解和搜索非结构化图像数据 *注释，创建数据集 *导出，训练和部署计算机视觉模型 *使用主动学习随着时间的推移改善数据集 对于最先进的计算机视觉培训笔记本，您可以与此数据集一起使用 该数据集包括5082张图像。 Powerlines-Tree以可可格式注释。 将以下预处理应用于每个图像： *调整大小为640x640（拉伸） 应用以下扩展用于创建每个源图像的2个版本： *水平翻转的50％概率 *垂直翻转的50％概率 *以下90度旋转之一的同等概率：无，顺时针，逆时针方向
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
圣诞树代码 这段代码会生成一个简单的圣诞树图形，包括： 三层树冠，使用不同深度的绿色。 一个棕色的树干。 一颗黄色的星星作为树顶。 随机分布的彩色小圆点作为装饰。 请确保你已经安装了matplotlib库，如果没有，可以通过pip install matplotlib来安装。运行这段代码后，你应该能看到一个圣诞树的图形。
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；
【资源说明】 基于 Node.js、MongoDB、Redis 开发的系统小商城后台全部资料+详细文档+源码+高分项目.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明： 文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展，智慧社区门户网站的建设成为了可能，并被视为21世纪信息产业的主要发展方向之一 强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。 指出了智慧社区门户网站系统的编程语言为Java，数据库为MYSQL，并实现了新闻资讯、社区共享、在线影院等功能。 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。
ECharts散点图-日历图
有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。 环境说明： 开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上 数据库工具：Navicat11及以上 开发软件：eclipse/idea Maven包：Maven3.3及以上
四川采矿场消防管理规定
有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。 环境说明： 开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上 数据库工具：Navicat11及以上 开发软件：eclipse/idea Maven包：Maven3.3及以上
荒地、水体、农田、湖检测14-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rarTAAL-TERRAIN-V6 2022-12-03下午5:58 ============================= *与您的团队在计算机视觉项目上合作 *收集和组织图像 *了解非结构化图像数据 *注释，创建数据集 *导出，训练和部署计算机视觉模型 *使用主动学习随着时间的推移改善数据集 它包括4115张图像。 地形以可可格式注释。 将以下预处理应用于每个图像： *像素数据的自动取向（带有Exif-Arientation剥离） *调整大小为640x640（拉伸） 应用以下扩展来创建每个源图像的3个版本： *水平翻转的50％概率 *垂直翻转的50％概率 *以下90度旋转之一的同等概率：无，顺时针，逆时针，颠倒
python hhhhhhhh
【资源说明】 基于selenium的boss直聘自动打招呼工具资料齐全+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！