AngularJS中文社区AngularJS 数组中元素属性变化怎么办
2015-02-08 · 知道合伙人数码行家
huanglenzhi
知道合伙人数码行家
采纳数：117538
获赞数：517188
长期从事计算机组装，维护，网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。
向TA提问 私信TA
关注
![]()
展开全部
你这个问题麻烦的地方是 Full Name 这个东西，它无法直接与一个变量绑定。需要手动定义“指令”解决。
另外你希望的 setter / getter 也不过是两个“指令”而已。简单实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="http：//ajax。googleapis。com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http：//ajax。googleapis。com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
</head>
<body>
<div ng-controller="TestCtrl">
<ul>
<li ng-repeat="name in names">
<input type="text" ng-model="name[0]" />
<input type="text" ng-model="name[1]" />
<input type="text" getter="get(name)" setter="set(name, $element)" />
</li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
var app = angular.module('Demo', [], angular.noop);
app.controller('TestCtrl', function($scope){
$scope.names = [
['a', 'b']
, ['xx', 'xxx']
, ['xx', 'xxx']
, ['xx', 'xxx']
];
$scope.get = function(name){
return name[0] + ' ' + name[1];
}
$scope.set = function(name, $element){
var p = $element.val().split(' ');
name[0] = p[0];
name[1] = p[1];
return;
}
});
app.directive('getter', function($parse){
var link = function($scope, $element, $attrs, $ctrl){
var func = $parse($attrs['getter']);
$scope.$watch(function(){
$element.val(func($scope));
});
}
return link;
});
app.directive('setter', function($parse){
var link = function($scope, $element, $attrs, $ctrl){
var func = $parse($attrs['setter']);
$element.on('change', function(eventObj){
func($scope, {$element: $element});
$scope.$digest();
});
}
return link;
});
angular.bootstrap(document, ['Demo']);
</script>
</body>
</html>
另外你希望的 setter / getter 也不过是两个“指令”而已。简单实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="http：//ajax。googleapis。com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http：//ajax。googleapis。com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
</head>
<body>
<div ng-controller="TestCtrl">
<ul>
<li ng-repeat="name in names">
<input type="text" ng-model="name[0]" />
<input type="text" ng-model="name[1]" />
<input type="text" getter="get(name)" setter="set(name, $element)" />
</li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
var app = angular.module('Demo', [], angular.noop);
app.controller('TestCtrl', function($scope){
$scope.names = [
['a', 'b']
, ['xx', 'xxx']
, ['xx', 'xxx']
, ['xx', 'xxx']
];
$scope.get = function(name){
return name[0] + ' ' + name[1];
}
$scope.set = function(name, $element){
var p = $element.val().split(' ');
name[0] = p[0];
name[1] = p[1];
return;
}
});
app.directive('getter', function($parse){
var link = function($scope, $element, $attrs, $ctrl){
var func = $parse($attrs['getter']);
$scope.$watch(function(){
$element.val(func($scope));
});
}
return link;
});
app.directive('setter', function($parse){
var link = function($scope, $element, $attrs, $ctrl){
var func = $parse($attrs['setter']);
$element.on('change', function(eventObj){
func($scope, {$element: $element});
$scope.$digest();
});
}
return link;
});
angular.bootstrap(document, ['Demo']);
</script>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
