本实例主要展示怎样用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>"
};
});
相关推荐
微信小程序番茄时钟的源码，支持进一步的修改。番茄钟，指的是把工作任务分解成半小时左右，集中精力工作25分钟后休息5分钟，如此视作种一个“番茄”，而“番茄工作法”的流程能使下一个30分钟更有动力。
电子元件 电子行业 行业分析 数据分析 数据报告 行业报告
安享智慧理财测试项目Mock服务代码
【资源说明】 课程设计 基于SparkMLlib的ALS算法的电影推荐系统源码+详细文档+全部数据齐全.zip课程设计 基于SparkMLlib的ALS算法的电影推荐系统源码+详细文档+全部数据齐全.zip 【备注】 1、该项目是高分毕业设计项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
华中科技大学电信专业 课程资料 作业 代码 实验报告-雷达与信息对抗-内含源码和说明书.zip
私信博主免费获取真题解析以及代码
【资源说明】 基于Bilibili公开的数据，通过Flink实时分析计算，做成需要的动态图表源码+部署文档+全部资料齐全 高分项目.zip基于Bilibili公开的数据，通过Flink实时分析计算，做成需要的动态图表源码+部署文档+全部资料齐全 高分项目.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
私信博主免费获取真题解析以及代码
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
【资源说明】 基于Hadoop的智能购书系统的设计与实现+部署文档+全部资料 高分项目.zip基于Hadoop的智能购书系统的设计与实现+部署文档+全部资料 高分项目.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
在面对机械装备制造行业日益增长的信息化需求时，本PPT格式的解决方案文档旨在提供一个全面、高效的数字化转型蓝图。这个资料包涵盖了从生产流程自动化到智能数据分析，再到供应链管理优化的各个方面，旨在帮助机械制造企业实现更高层次的生产智能化和运营效率。解决方案中，我们首先强调了制造执行系统（MES）的集成，它能够实时监控工厂的生产线，确保生产过程的透明度和可追溯性。通过与物联网（IoT）设备的结合，可以实现设备状态的远程监控和维护预测，从而减少停机时间并提高生产效率。其次，方案中还包含了一套完整的企业资源规划（ERP）系统，它能够帮助企业管理从原材料采购到成品出库的整个流程，确保物流和信息流的无缝对接。ERP系统的应用不仅提升了资源的使用效率，也为企业决策提供了数据支持。此外，我们还提出了基于大数据和人工智能技术的智能分析模块，该模块能够对生产过程中产生的海量数据进行深度分析，帮助企业发现潜在的生产瓶颈，优化产品设计，提升产品质量，同时也能够根据市场趋势调整生产计划，增强企业的市场响应能力。最后，为了确保整个信息系统的安全性和稳定性，解决方案还包括了先进的网络安全措施和数据备份机制，保障企业
厦门大学软件工程系卓越工程师班算法分析与设计课程实验源码-内含源码和说明书.zip
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
onnx_resnet_v1_50.zip