AngularJS - How to get object on button click

Question

I have an array of objects. I displayed the names in input fields. Now I want the updated object (whatever user fills in input field) on button click

Example if I enter “abcde” and “pq” in input field it should show update object on button click

[
    {
      name:'abcde’
    },
    {
      name:'pq'
    }
    ];

http://plnkr.co/edit/51BlTe5tAEgMV7ZlJLKV

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.c = [
    {
      name:'abc'
    },
    {
      name:'pqr'
    }
    ];

    $scope.onclick =function(){

      alert('dd')
      console.log($scope.c)
    }

});

rjv · Accepted Answer · 2018-10-25 06:35:48Z

2

Use ng-model in your template

<li ng-repeat="x in c">
  <input type="text" ng-model='x.name' value="{{x.name==='abc'?'ddd':'hhh'}}"/>
</li>

If you need to update $scope.c on button click, use ng-model on a different scope variable and assign the same to $scope.c in onclick

UPDATE:

Also note that ng-model does not depend on value, so x.name==='abc'?'ddd':'hhh' should be done in the onclick or ng-change event handler

edited Oct 25, 2018 at 6:35

answered Oct 25, 2018 at 6:27

rjv

6,9365 gold badges31 silver badges53 bronze badges

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

1 Comment

user944513 Over a year ago

cn you share plunker

Dipal · Accepted Answer · 2018-10-25 07:59:23Z

You can also try this out.

 <li ng-repeat="x in displayValue">
      <input type="text" ng-model='x.name' ng-change='valueChanged(x.name,$index)'/>
 </li>

And in your controller you can have 2 different json one is for display purpose and one for actual values. So conditionally showing "hhhh" and "dddd" will also be satisfy.

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.displayValue = [
    {
      name:'abc' == 'abc'? 'hhhh' : 'dddd'
    },
    {
      name:'pqr' == 'abc'? 'hhhh' : 'dddd'
    }
    ];

  $scope.actualValue = [
    {
      name: ''
    },
    {
      name:''
    }
    ];

    $scope.valueChanged =function(value,index)
    {
      $scope.actualValue[index].name =  value;
    }

    $scope.onclick =function(){

      console.log($scope.actualValue)
    }

});

Collectives™ on Stack Overflow

AngularJS - How to get object on button click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related