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

我正在尝试遵循一种方法，用户可以单击

项目，编辑它，然后最终能够保存更改

该示例使用了

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;
                })
            }]
        }
    })
}]);

我尝试使用

数据id

（查看），但没有成功，因为我假设您不能两次使用同一id，并且我所需的功能需要两个元素

ng show

和

ng hide

，具体取决于传递给它们的布尔值

我现在处于一种困惑的状态，不知道该采取哪种方法

问题

如何调整不使用

ng repeat

的代码来处理此问题？或者你知道我可以采取另一种方法来达到同样的效果吗

<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;
    };

});

简称
{{$ctrl.patent.shortTitle}
角度。模块（'myApp'）。组件（'patent'{
templateUrl:'p3sweb/app/components/patents/views/patent item.htm'，
控制器：函数（）{
var vm=这个；
vm.editItem=函数（项）{
item.editing=true；
}
vm.doneEditing=函数（项）{
item.editing=false；
};
});

根据我对您问题的理解，我已经创建了一个JSFIDLE，请看一看，或者您可以创建一个包含您所面临问题的JSFIDLE，以便更好地理解

双击以下项目进行编辑：
添加项
{{item.name}

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

});

简称
{{$ctrl.patent.shortTitle}
角度。模块（'myApp'）。组件（'patent'{
templateUrl:'p3sweb/app/components/patents/views/patent item.htm'，
控制器：函数（）{
var vm=这个；
vm.editing=[]；
vm.editItem=函数（索引）{
vm.editing[index]=true；
}
vm.doneEditing=函数（索引）{
vm.editing[index]=false；
};
});

---

演示：

您正在使用ng repeat在您的视图中填充数据，为什么要删除它？我的视图中没有使用ng repeat。我有一个表需要一些对象属性和值，所以只需将特定数据绑定到必要的元素。只需更新问题以澄清这一点，谢谢，尽管我无法访问这是你的小提琴吗？

%20http的服务器DNS地址找不到。

谢谢你的时间@Harpeet和示例！错误：

ReferenceError:index没有定义。
$index
会不起作用吗？我的错，我忘了更改函数参数的名称。已经更新了它。现在项没有定义。慢慢地，哈哈。我添加了
vm
，无错误但无响应He..检查plunker并相应更新您的数据结构命名。已再次更新。刚刚意识到要删除对象属性名称。谢谢@Vivz，您已经帮助我几次了！
<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;
    };

});