尽量不要用函数
<!DOCTYPE html>
<html ng-app="my_app">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="angular.min-1.69.js"></script>
<script type="text/javascript">
var app = angular.module("my_app", []);
app.controller('my_controller', function($scope) {
window.scope=$scope;
/* 班级信息 */
$scope.selectedClass = 'c2';
$scope.classes = [{
id: 'c1',
name: '一班',
}, {
id: 'c2',
name: '二班',
}];
/* 学生信息 */
$scope.students = [{
id: 's1',
name: '张三',
gender: '0',
},
{
id: 's2',
name: '李四',
gender: '1',
},
{
id: 's3',
name: '王五',
gender: '2',
}
];
/* 性别 */
$scope.genders = [{
id: 0,
remark: '女'
}, {
id: 1,
remark: '男'
}, {
id: 2,
remark: '未知'
}];
/* 使用函数修改性别,只要$scope中有对象内容发送变化就会触发,建议不要使用 */
$scope.getGender=function(gender){
console.log('getGender');
var flag = '';
$.each($scope.genders, function(i, item) {
if (gender == item.id) {
flag = item.remark;
return false;
}
});
return flag;
}
});
/* 使用过滤器修改性别,用window.scope解决过滤器中使用$scope对象/对象集合 */
app.filter('genderFilter', function() {
return function(input) {
console.log('genderFilter');
var flag = '';
$.each(window.scope.genders, function(i, item) {
if (input == item.id) {
flag = item.remark;
return false;
}
});
return flag;
};
});
</script>
</head>
<body ng-controller="my_controller">
<div>
<select ng-model="selectedClass" ng-options="s.id as s.name for s in classes">
</select>
</div>
<div>
<ul>
<!-- 使用过滤器修改性别 -->
<li ng-repeat="item in students" id="{{item.id}}">
{{item.name}}-{{item.gender|genderFilter}}
</li>
</ul>
</div>
<div>
<ul>
<!-- 使用函数修改性别 -->
<li ng-repeat="item in students" id="{{item.id}}">
{{item.name}}-{{getGender(item.gender)}}
</li>
</ul>
</div>
</body>
</html>