Javascript 是否可以在AngularJS中动态分配“ng模型”
问题描述 我正在尝试使用Javascript 是否可以在AngularJS中动态分配“ng模型”,javascript,angularjs,data-binding,angularjs-directive,Javascript,Angularjs,Data Binding,Angularjs Directive,问题描述 我正在尝试使用AngularJS创建一个简单的网格。此网格中的每个单元格都有一个文本输入。有一个额外的文本输入（我称之为全局输入），每当用户关注网格单元时，其ng模型应动态分配给其中一个网格单元 不是很清楚吗？？让我展示一下我失败的实现： 标记 <body ng-controller="MainCtrl"> <b> Global : </b> <input type="text", ng-model="global" size=5
AngularJS网格。此网格中的每个单元格
都有一个文本输入
。有一个额外的文本输入
（我称之为全局输入），每当用户关注网格单元
时，其ng模型
应动态分配给其中一个网格单元
不是很清楚吗？？让我展示一下我失败的实现：
标记
<body ng-controller="MainCtrl">
<b> Global : </b>
<input type="text", ng-model="global" size=50 />
<br />
<b> Grid : </b>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td> <input type="text" ng-model="item.name" grid-input="global" /></td>
<td> <input type="text" ng-model="item.address" grid-input="global" /></td>
<td> <input type="text" ng-model="item.email" grid-input="global" /></td>
</tr>
</tbody>
</table>
</body>
var app = angular.module('app', []);
app.directive('gridInput', function($rootScope){
return {
restrict : 'AE'
, scope : {
model : '=ngModel'
, global : '=gridInput'
}
, link : function(scope, iElem, iAttrs) {
$(iElem).on('focus', function(e){
scope.global = scope.model;//what is this doing?? I don't KNOW!
})
}
}
});
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name : 'Lekhnath Rijal', address:'Ilam, Nepal', email:'me@gmail.com'},
{name : 'abc def', address:'ghi, jkl', email:'mnop@qrst.uv'}
];
});
我想要什么
我希望在单元格聚焦后，在全局文本输入
和网格单元格之一
之间进行双向数据绑定。这两个输入之间的绑定
应该持续到另一个网格单元
接收焦点为止
这里有一个
您可以使用ng change、ng focus来更改所选项目，而不是使用自定义指令
index.html
<body ng-controller="MainCtrl">
<b> Global : </b>
<input type="text", ng-model="global.text" size=50 />
<br />
<b> Grid : </b>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>
<input
type="text"
ng-model="item.name"
ng-focus="global.text=item.name; setSelectedItem(item, 'name')"
ng-change="global.text=item.name"/>
</td>
<td>
<input
type="text"
ng-model="item.address"
ng-focus="global.text=item.address; setSelectedItem(item, 'address')"
ng-change="global.text=item.address"/>
</td>
<td>
<input
type="text"
ng-model="item.email"
ng-focus="global.text=item.email; setSelectedItem(item, 'email')" ng-change="global.text=item.email"/>
</td>
</tr>
</tbody>
</table>
</body>
这是普朗克：
gr8，但有一个小错误。如果从全局文本框中删除了所有字符，则不会从单元格输入中清除最后一个字符。我会尝试解决这个问题，希望你能复习一下。我明白了。只需将scope.$watch的if语句更改为if（text！=未定义）。我更新了答案。
app.controller('MainCtrl', function($scope) {
$scope.global = {};
$scope.items = [{
name: 'Lekhnath Rijal',
address: 'Ilam, Nepal',
email: 'me@gmail.com'
}, {
name: 'abc def',
address: 'ghi, jkl',
email: 'mnop@qrst.uv'
}];
$scope.$watch('global.text', function(text) {
if (text != undefined && $scope.selectedItem) {
$scope.selectedItem[$scope.selectedAttribute] = text;
}
}); $scope.setSelectedItem = function(item, attribute) {
$scope.selectedItem = item;
$scope.selectedAttribute = attribute;
}
});