发表于： 2016-08-11 23:30:58
0 1871
今天完成的事：看angular的书
明天要做的事：学习原生js
收货：
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.todos = [
{ action: "Get groceries", complete: false },
{ action: "Call plumber", complete: false },
{ action: "Buy running shoes", complete: true },
{ action: "Buy flowers", complete: false },
{ action: "Call family", complete: false }];
$scope.buttonNames = ["Red", "Green", "Blue"];
$scope.settings = {
Rows: "Red",
Columns: "Green",
};
});
</script>
<style>
tr.Red { background-color: lightcoral; }
tr.Green { background-color: lightgreen;}
tr.Blue { background-color: lightblue; }
</style>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
<h3 class="panel-header">To Do List</h3>
<div class="row well">
<div class="col-xs-6" ng-repeat="(key, val) in settings | orderBy:key">
<h4>{{key}}</h4>
<div class="radio" ng-repeat="button in buttonNames">
<label>
<input type="radio" ng-model="settings[key]"
value="{{button}}">{{button}}
</label>
</div>
</div>
</div>
<table class="table">
<thead>
<tr><th>#</th><th>Action</th><th>Done</th></tr>
</thead>
<tr ng-repeat="item in todos" ng-class="settings.Columns">
<td>{{$index + 1}}</td>
<td>{{item.action}}</td>
<td ng-style="{'background-color': settings.Rows}">
{{item.complete}}
</td>
</tr>
</table>
</div>
</body>
今天重看angular的书，却被一个简单的radio的ng-model给难到了，研究了一下单选钮的value值就是对应了双向绑定的值，然后对应到页面中的ng-class来通过改变单选钮的值，改变页面中的样式
还有就是书中在ng-click后面写的一些内敛表达式看起来比较费劲。。。。
还是需要好好去熟悉一下
返回列表
评论