※ng-options 和 ng-repeat 不同
<html>
<script type="text/javascript" src="angular.min.js"></script>
<body ng-app='xxx' ng-controller='ccc'>
<select ng-model="sel">
<option ng-repeat="l in lists" value="{{l.x}}">{{l.o}}</option>
</select>
<p>選到的value是{{sel}}</p>
<select ng-model="sel2" ng-options="l.o for l in lists"></select>
<p>選了{{sel2.o}}，value是{{sel2.x}}</p>
</body>
</html>
<script>
var app = angular.module('xxx', []);
app.controller('ccc', ($scope) => {
$scope.lists = [
{
o: 'a', x: 1
}, {
o: 'b', x: 2
}, {
o: 'c', x: 3
}
];
});
</script>
※ng-repeat by 字串；ng-options by 物件
※ng-options 可設多個物件
<html>
<script type="text/javascript" src="angular.min.js"></script>
<body ng-app='xxx' ng-controller='ccc'>
<select ng-model="sel" ng-options=" p2.name for (p1, p2) in lists "></select>
<p>選了{{sel.name}}，價錢是{{sel.price}}，製造年是{{sel.date}}年</p>
</body>
</html>
<script>
var app = angular.module('xxx', []);
app.controller('ccc', ($scope) => {
$scope.lists = {
chessProduct1: {name:'象棋', price: 30, date: '1999'},
chessProduct2: {name:'五子棋', price: 25, date: '2000'},
chessProduct3: {name:'圍棋', price: 40, date: '2010'}
};
});
</script>
※注意chessProduct1~3，這三個變數如果一樣會覆蓋，使畫面上只剩最後一個
※$even、$odd、$index
<html>
<script type="text/javascript" src="angular.min.js"></script>
<body ng-app='xxx' ng-controller='ccc'>
<table>
<tr ng-repeat="l in lists |orderBy:'name'">
<td ng-if="$odd" style="background-color:lightgreen">{{ $index + 1 }}</td>
<td ng-if="$even">{{ l.name }}</td>
<td>{{ l.price }}</td>
</tr>
</table>
</body>
</html>
<script>
var app = angular.module('xxx', []);
app.controller('ccc', ($scope) => {
$scope.lists = [
{name: 'papaya', price: 30},
{name: 'apple', price: 25},
{name: 'guava', price: 80},
{name: 'durian', price: 60},
{name: 'banana', price: 40}
];
});
</script>
※這三個都是從0開始的
$index：從0開始的數字
$odd：奇數時會顯示
$even：偶數時會顯示
沒有留言:
張貼留言