一般常用的两种是ng-style跟ng-class
1、ng-style
ng-style 指令为 HTML 元素添加 style 属性。
ng-style 属性值必须是对象，表达式返回的也是对象。
对象由 CSS 属性和值组成，即 key=>value 对。
例如：
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">菜鸟教程</h1>
<script>
var app = angular.module("myApp", [])
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
})
</script>
</body>
2、ng-class
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
ng-class 指令的值可以是字符串，对象，或一个数组。
如果是字符串，多个类名使用空格分隔。
如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。
如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。
例如：
<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div>
angularjs的使用，比较推荐的方法是模块化，即将不同功能或者类似业务内容组成module。其余的如控制器、服务、工厂、配置等等都是创建在对应的module下。使用不同的moduleName.js文件，进行管理和组织，而不是都写在index.html中。angular使用route.js和ng-view切换展现的。所以：其实应该是独立出来的，不应该写在index.html，已经不是原来的形式啦。第一步，打开HBuilder开发工具，并在创建好的web项目目录下创建静态页面select.html第二步，引入ionic框架有关的CSS文件和JavaScript文件
第三步，在body标签元素内插入div，并设置样式item、item-input、item-select
第四步，在第一个div标签元素设置ng-app、ng-controller指令
第五步，利用AngularJS编辑代码，并给下拉框赋值，months有id和name
第六步，下拉框插入option
<select>
<option ng-repeat="mo in months" value="{{mo.id}}">{{mo.month}}</option>
</select>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）