标签：
做了一个这样的程序通过选择框选择样式，下面的段落样式跟着改变。就是想做这么一个东西。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 select{margin-right:20px;} 8 </style> 9 <script type="text/javascript" src="js/angularjs/1.2.26/angular.js"></script> 10 <script type="text/javascript" src="js/jquery.min.js"></script> 11 </head> 12 <body> 13 <div ng-app="myApp" ng-controller="ColorController"> 14 <select ng-model="selectedcolor" ng-options="m.name for m in modelcolor"> 15 <option value="">-- 请选择颜色 --</option> 16 </select> 17 <select ng-model="selectedfont" ng-options="m.name for m in modelfont"> 18 <option value="">-- 请选择字体 --</option> 19 </select> 20 <button directive>文本</button> 21 <p style="{{selectedfont.value}};{{selectedcolor.value}};width:300px;height:200px;border:1px solid deeppink;" doubleedittext> 22 大道之行也，天下为公，选贤与能，讲信修睦。故人不独亲其亲，不独子其子，使老有所终，壮有所用，幼有所长，鳏、寡、孤、独、废疾者皆有所养，男有分，女有归。货恶其弃于地也，不必藏于己；力恶其不出于身也，不必为己。 23 </p> 24 </div> 25 26 </body> 27 </html> 28 <script type="text/javascript"> 29 var myAppModule = angular.module(‘myApp‘, []); 30 myAppModule.controller(‘ColorController‘, [‘$scope‘,function($scope){ 31 $scope.selectedcolor= ‘‘; 32 $scope.modelcolor = [ 33 {name:‘蓝色‘, value:‘color:blue‘}, 34 {name:‘粉色‘, value:‘color:pink‘}, 35 {name:‘绿色‘, value:‘color:green‘}, 36 {name:‘灰色‘, value:‘color:gray‘} 37 ]; 38 $scope.selectedfont= ‘‘; 39 $scope.modelfont = [ 40 {name:‘微软雅黑‘, value:‘font-family:"Microsoft YaHei"‘}, 41 {name:‘楷体‘, value:‘font-family:"楷体"‘}, 42 {name:‘黑体‘, value:‘font-family:"黑体"‘}, 43 {name:‘Trebuchet MS‘, value:‘font-family:Trebuchet MS‘} 44 ]; 45 }]); 46 myAppModule.directive(‘directive‘, function(){ 47 return { 48 restrict: ‘A‘, 49 link: function(scope, elem, attrs){ 50 $(elem).click(function(){ 51 $(‘p‘).append("我是文本..."); 52 }); 53 } 54 } 55 }); 56 myAppModule.directive(‘doubleedittext‘, function(){ 57 return { 58 restrict: ‘A‘, 59 link: function(scope, elem, attrs){ 60 $(elem).dblclick(function(){ 61 $(‘p‘).append(""); 62 }); 63 } 64 } 65 }); 66 </script>
效果截图：
标签：
原文地址：http://www.cnblogs.com/liubeimeng/p/5606107.html
