将数据从单击项传递到AngularJS中的控制器

Question

我尝试遵循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 （查看如何在angularjs中检索单击的ElementId？），但没有成功，因为我假设您不能两次使用相同的id，并且我想要的功能需要两个元素ng-show和ng-hide取决于传递给它们的布尔值。

我现在处于混乱状态，不确定要采用哪种方法。

题

如何调整不使用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;
    };

});

Answer 1

根据我对您问题的理解，我创建了一个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>

Answer 2

您可以创建一个数组并将每个输入连接到从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;
    };

});

演示： http : //jsfiddle.net/F7K63/381/

将数据从单击项传递到AngularJS中的控制器

问题描述

2 个解决方案

解决方案1
2 2017-07-19 11:12:33

解决方案2
1 已采纳 2017-07-19 11:19:31

将数据从单击项传递到AngularJS中的控制器

问题描述

2 个解决方案

解决方案1 2 2017-07-19 11:12:33

解决方案2 1 已采纳 2017-07-19 11:19:31

解决方案1
2 2017-07-19 11:12:33

解决方案2
1 已采纳 2017-07-19 11:19:31