passing data from clicked item to controller in AngularJS

Question

I am attempting to follow a JSFiddle, where a user can click on a <td> item, edit it, then eventually be able to save the changes.

The example uses ng-repeat and all others I have looked at do to where as I am not, I am using data passed from a resolve command in my route folder.

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

I have attempted to use data-id (looked at How to retrieve the clicked ElementId in angularjs?), but with no success, as I assume you cannot use the same id twice and my desired functionality requires two elements that ng-show and ng-hide depending on the boolean value passed to them.

I have now got myself in a confused state, not sure which approach to take.

Question

How do I adapt my code that doesn't use ng-repeat to work with this JSFiddle? OR do you know another apporach I can take to achieve the same results?

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

});

You are using ng-repeat the populate the data on ur view, why then u want to remove it? — Vivz
– Vivz, Commented Jul 19, 2017 at 11:07
I'm not using ng-repeat in my view. I have a table that needs some of the objects properties and values, so just binding specific data to the necessary elements. Just updated question to clarify that — Patrick McDermott
– Patrick McDermott, Commented Jul 19, 2017 at 11:09

Harpreet · Accepted Answer · 2017-07-20 05:18:33Z

2

As per my understanding regarding your question I have created a jsfiddle, have a look or you can create a jsfiddle with the issue you are facing for better understanding

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>

edited Jul 20, 2017 at 5:18

answered Jul 19, 2017 at 11:12

Harpreet

1,60715 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patrick McDermott Over a year ago

Thank you, although I can't access your fiddle? %20http’s server DNS address could not be found.

Patrick McDermott Over a year ago

Thank you for your time @Harpeet and example!

Vivz · Accepted Answer · 2017-07-19 11:33:15Z

1

You can create an array and connect each input to a specific index starting from 0 and then pass that index to your function call.

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

});

Demo: http://jsfiddle.net/F7K63/381/

edited Jul 19, 2017 at 11:33

answered Jul 19, 2017 at 11:19

Vivz

6,6282 gold badges19 silver badges34 bronze badges

5 Comments

Patrick McDermott Over a year ago

Error: ReferenceError: index is not defined. Would $index not work?

Vivz Over a year ago

My bad, I forgot to change the name of function params. have updated it.

Patrick McDermott Over a year ago

Now item is not defined. Slowly getting there haha. I added vm, no errors but no response

Vivz Over a year ago

hehe..Check the plunker and update ur data structure naming accordingly.Have updated again.

Patrick McDermott Over a year ago

Just realised to remove the object property name. Thank you @Vivz, you've helped me a few times now!

Collectives™ on Stack Overflow

passing data from clicked item to controller in AngularJS

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related