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

});

Answer 1

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

Answer 2

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

});