我正在尝试关注JSFiddle,用户可以点击<td>
项目进行编辑,然后最终保存更改。
该示例使用ng-repeat
以及我所看到的所有其他内容,因为我不是,我使用从路径文件夹中的resolve命令传递的数据。
$stateProvider
.state('app.patents.patent', {
url: '/{patentId}',
component: 'patent',
resolve: {
patent: ['patents', '$stateParams', function(patents, $stateParams) {
return patents.find(function(patent){
return patent.id == $stateParams.patentId;
})
}]
}
})
}]);
我试图使用data-id
(查看How to retrieve the clicked ElementId in angularjs?),但没有成功,因为我假设您不能使用相同的ID两次,而我所需的功能需要两个元素{{1} }和ng-show
取决于传递给它们的布尔值。
我现在处于困惑状态,不知道采取哪种方法。
问题
如何调整不使用ng-hide
来处理此JSFiddle的代码?或者你知道我可以采取的其他方法来达到同样的效果吗?
ng-repeat
答案 0 :(得分:2)
根据我对你的问题的理解,我创建了一个jsfiddle,看一下,或者你可以创建一个jsfiddle来解决你面临的问题,以便更好地理解
<!DOCTYPE html>
<div ng-app ng-controller="myCtrl" class="container">Double-click on the items below to edit:
<button type="button" ng-click="newItem()">Add item</button>
<table>
<tr ng-repeat="item in items">
<td>
<span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.name}}</span>
<input ng-show="item.editing" ng-model="item.name" ng-blur="doneEditing(item)" autofocus />
</td>
</tr>
</table>
</div>
答案 1 :(得分:1)
您可以创建一个数组并将每个输入连接到从0开始的特定索引,然后将该索引传递给函数调用。
<tr>
<th class="text-xs-right">Short Name</th>
<td>
<span ng-hide="$ctrl.editing[1]" ng-dblclick="$ctrl.editItem(1)">{{$ctrl.patent.shortTitle}}</span>
<input type="text" data-id="123" ng-show="$ctrl.editing[1]" ng-blur="$ctrl.doneEditing(1)" ng-model="$ctrl.patent.shortTitle"></input>
</td>
</tr>
angular.module('myApp').component('patent', {
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm',
controller: function() {
var vm = this;
vm.editing=[];
vm.editItem = function (index) {
vm.editing[index] = true;
}
vm.doneEditing = function (index) {
vm.editing[index] = false;
};
});