gpt4 book ai didi

javascript - 将数据从单击的项目传递到 AngularJS 中的 Controller

转载 作者:太空宇宙 更新时间:2023-11-04 15:56:40 24 4
gpt4 key购买 nike

我正在尝试关注 JSFiddle ,用户可以点击 <td>项目,对其进行编辑,然后最终能够保存更改。

示例使用 ng-repeat和我看过的所有其他人都在做我不在的地方,我正在使用从我的路由文件夹中的解析命令传递的数据。

$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 并且我想要的功能需要两个元素 ng-showng-hide取决于传递给它们的 bool 值。

我现在很困惑,不知道该采取哪种方法。

问题

如何调整不使用 ng-repeat 的代码使用此 JSFiddle ?或者您知道我可以采用另一种方法来达到相同的结果吗?

<tr>
<th class="text-xs-right">Short Name</th>
<td>
<span data-id="123" ng-hide="$ctrl.shortTitle.editing" ng-dblclick="$ctrl.editItem(123)">{{$ctrl.patent.shortTitle}}</span>
<input type="text" data-id="123" ng-show="$ctrl.shortTitles.editing" ng-blur="$ctrl.doneEditing(123)" 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.editItem = function (item) {
item.editing = true;
}

vm.doneEditing = function (item) {
item.editing = false;
};

});

最佳答案

根据我对你的问题的理解,我创建了一个 jsfiddle,看看或者你可以创建一个 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>

关于javascript - 将数据从单击的项目传递到 AngularJS 中的 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45188502/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com