How to add an object to array on base of text box value within ng-click action

Question

How to add a Technology, which is entered in the text box as a record when i click on add button in ng-click action required for my table?

var app = angular.module("myApp",[]);
app.controller("myCtrl", function($scope){
$scope.technologies = [
		{name:'C#', likes:'0', dislikes:'0'},
		{name:'.Net', likes:'0', dislikes:'0'},
		{name:'Java', likes:'0', dislikes:'0'},
		{name:'MySQL', likes:'0', dislikes:'0'}
		];

		$scope.incrementlikes = function(technology){
		technology.likes++;
		}
		$scope.incrementdislikes = function(technology){
		technology.dislikes++;
		}
		$scope.addRecord = function(text){
		$scope.technology.push({name:text, likes:'0', dislikes:'0'});
		}
});

table,
th,
tr,
td {
  border: 2px solid #fff;
  border-collapse: collapse;
}

td,
th {
  background: #006688;
  color: #fff;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table style="width:400px;">
    <tr>
      <td align="right">Enter Technologies : </td>
      <td><input type="text" /></td>
      <td><input type="button" value="Add" ng-click="addRecord(technology);" /></td>
    </tr>
  </table>
  <table style="width:400px;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Likes</th>
        <th>Dislikes</th>
        <th>Likes / Dislikes</th>
      </tr>
      <tr ng-repeat="technology in technologies">
        <td>{{technology.name}}</td>
        <td align="center">{{technology.likes}}</td>
        <td align="center">{{technology.dislikes}}</td>
        <td align="center">
          <input type="button" value="Likes" ng-click="incrementlikes(technology);" />
          <input type="button" value="Dislikes" ng-click="incrementdislikes(technology);" />
        </td>
      </tr>
    </thead>
  </table>
</div>

In 'addRecord' method, try to push into $scope.technologies — Anil Kumar
– Anil Kumar, Commented May 24, 2018 at 11:11

Aleksey Solovey · Accepted Answer · 2018-05-24 11:11:19Z

You need to add ng-model to your input to accept some name for a technology. Then add a record with an object, e.g. addRecord({'name':name,'likes':0,'dislikes':0}). This should populate the existing array with push: $scope.technologies.push(technology);.

Here is a demo:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.technologies = [{
      name: 'C#',
      likes: '0',
      dislikes: '0'
    },
    {
      name: '.Net',
      likes: '0',
      dislikes: '0'
    },
    {
      name: 'Java',
      likes: '0',
      dislikes: '0'
    },
    {
      name: 'MySQL',
      likes: '0',
      dislikes: '0'
    }
  ];

  $scope.incrementlikes = function(technology) {
    technology.likes++;
  }
  $scope.incrementdislikes = function(technology) {
    technology.dislikes++;
  }
  $scope.addRecord = function(technology) {
    $scope.technologies.push(technology);
  }
});

table,
th,
tr,
td {
  border: 2px solid #fff;
  border-collapse: collapse;
}

td,
th {
  background: #006688;
  color: #fff;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table style="width:400px;">
    <tr>
      <td align="right">Enter Technologies : </td>
      <td><input type="text" ng-model="name" /></td>
      <td><input type="button" value="Add" ng-click="addRecord({'name':name,'likes':0,'dislikes':0});" /></td>
    </tr>
  </table>
  <table style="width:400px;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Likes</th>
        <th>Dislikes</th>
        <th>Likes / Dislikes</th>
      </tr>
      <tr ng-repeat="technology in technologies">
        <td>{{technology.name}}</td>
        <td align="center">{{technology.likes}}</td>
        <td align="center">{{technology.dislikes}}</td>
        <td align="center">
          <input type="button" value="Likes" ng-click="incrementlikes(technology);" />
          <input type="button" value="Dislikes" ng-click="incrementdislikes(technology);" />
        </td>
      </tr>
    </thead>
  </table>
</div>

firegloves · Accepted Answer · 2018-05-24 11:09:48Z

In angular is not needed to pass the parameter. You can use angular data binding to write directly into the controller's variable like so

Cotroller

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.newTech = {
      name: '',
      likes: '0',
      dislikes: '0'
  };

  $scope.technologies = [{
      name: 'C#',
      likes: '0',
      dislikes: '0'
    },
    {
      name: '.Net',
      likes: '0',
      dislikes: '0'
    },
    {
      name: 'Java',
      likes: '0',
      dislikes: '0'
    },
    {
      name: 'MySQL',
      likes: '0',
      dislikes: '0'
    }
  ];

  $scope.incrementlikes = function(technology) {
    technology.likes++;
  }
  $scope.incrementdislikes = function(technology) {
    technology.dislikes++;
  }
  $scope.addRecord = function(technology) {
    $scope.technologies.push(newTech);
    newTech.name = ''; // reset variable
  }
});

Markup

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table style="width:400px;">
    <tr>
      <td align="right">Enter Technologies : </td>
      <td><input type="text" ng-model="newTech.name" /></td>
      <td><input type="button" value="Add" ng-click="addRecord();" /></td>
    </tr>
  </table>
  <table style="width:400px;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Likes</th>
        <th>Dislikes</th>
        <th>Likes / Dislikes</th>
      </tr>
      <tr ng-repeat="technology in technologies">
        <td>{{technology.name}}</td>
        <td align="center">{{technology.likes}}</td>
        <td align="center">{{technology.dislikes}}</td>
        <td align="center">
          <input type="button" value="Likes" ng-click="incrementlikes(technology);" />
          <input type="button" value="Dislikes" ng-click="incrementdislikes(technology);" />
        </td>
      </tr>
    </thead>
  </table>
</div>

Sudhir Ojha · Accepted Answer · 2018-05-24 11:11:23Z

Here is working code you need to use ng-model on your input field to get value from that text box and initialize in controller and then push it in $scope.technologies.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.formData = {};
  $scope.technologies = [{
      name: 'C#',
      likes: '0',
      dislikes: '0'
    },
    {
      name: '.Net',
      likes: '0',
      dislikes: '0'
    },
    {
      name: 'Java',
      likes: '0',
      dislikes: '0'
    },
    {
      name: 'MySQL',
      likes: '0',
      dislikes: '0'
    }
  ];

  $scope.incrementlikes = function(technology) {
    technology.likes++;
  }
  $scope.incrementdislikes = function(technology) {
    technology.dislikes++;
  }
  $scope.addRecord = function() {
    $scope.formData.likes = 0;
    $scope.formData.dislikes = 0;
    $scope.technologies.push($scope.formData);
  }
});

table,
th,
tr,
td {
  border: 2px solid #fff;
  border-collapse: collapse;
}

td,
th {
  background: #006688;
  color: #fff;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table style="width:400px;">
    <tr>
      <td align="right">Enter Technologies : </td>
      <td><input type="text" ng-model="formData.name"/></td>
      <td><input type="button" value="Add" ng-click="addRecord(technology);" /></td>
    </tr>
  </table>
  <table style="width:400px;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Likes</th>
        <th>Dislikes</th>
        <th>Likes / Dislikes</th>
      </tr>
      <tr ng-repeat="technology in technologies">
        <td>{{technology.name}}</td>
        <td align="center">{{technology.likes}}</td>
        <td align="center">{{technology.dislikes}}</td>
        <td align="center">
          <input type="button" value="Likes" ng-click="incrementlikes(technology);" />
          <input type="button" value="Dislikes" ng-click="incrementdislikes(technology);" />
        </td>
      </tr>
    </thead>
  </table>
</div>

Łukasz · Accepted Answer · 2018-05-24 11:14:44Z

Add newTechName variable in controller. Bind it to text field.

<td><input type="text" ng-model=newTechName></td>

Now you can use it in addRecord:

$scope.addRecord = function() {
   var technology = {likes: '0', dislikes: '0'};
   technology.name = $scope.newTechName;
   $scope.technologies.push(technology);
}

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  
    $scope.newTechName = '';
    $scope.technologies = [{
      name: 'C#',
      likes: '0',
      dislikes: '0'
    },
    {
      name: '.Net',
      likes: '0',
      dislikes: '0'
    },
    {
      name: 'Java',
      likes: '0',
      dislikes: '0'
    },
    {
      name: 'MySQL',
      likes: '0',
      dislikes: '0'
    }
  ];

  $scope.incrementlikes = function(technology) {
    technology.likes++;
  }
  $scope.incrementdislikes = function(technology) {
    technology.dislikes++;
  }
  $scope.addRecord = function() {
    var technology = {likes: '0', dislikes: '0'};
    technology.name = $scope.newTechName;
    $scope.technologies.push(technology);
  }
});

table,
th,
tr,
td {
  border: 2px solid #fff;
  border-collapse: collapse;
}

td,
th {
  background: #006688;
  color: #fff;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table style="width:400px;">
    <tr>
      <td align="right">Enter Technologies : </td>
      <td><input type="text" ng-model=newTechName></td>
      <td><input type="button" value="Add" ng-click="addRecord(technology);" /></td>
    </tr>
  </table>
  <table style="width:400px;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Likes</th>
        <th>Dislikes</th>
        <th>Likes / Dislikes</th>
      </tr>
      <tr ng-repeat="technology in technologies">
        <td>{{technology.name}}</td>
        <td align="center">{{technology.likes}}</td>
        <td align="center">{{technology.dislikes}}</td>
        <td align="center">
          <input type="button" value="Likes" ng-click="incrementlikes(technology);" />
          <input type="button" value="Dislikes" ng-click="incrementdislikes(technology);" />
        </td>
      </tr>
    </thead>
  </table>
</div>

Sagar Raviprolu · Accepted Answer · 2018-05-24 11:27:10Z

1

please check the below link you can find the solution

$scope.technology = technology.push();//wrong way

$scope.technologies.push(technology)//wright way to push to an array

 $scope.addRecord = function() {
var tempTech={
  name: $scope.newtechnology,
  likes: '0',
  dislikes: '0'
}
$scope.technologies.push(tempTech);
}



  <table style="width:400px;">
<tr>
  <td align="right">Enter Technologies : </td>
  <td><input type="text" ng-model="newtechnology" /></td>
  <td><input type="button" value="Add" ng-click="addRecord();" /></td>
</tr>

answered May 24, 2018 at 11:27

Sagar Raviprolu

1021 silver badge7 bronze badges

Comments

Jay · Accepted Answer · 2018-05-24 11:49:31Z

Only a small code fix required in addRecord function. Find the solution below:-

var app = angular.module("myApp",[]);
app.controller("myCtrl", function($scope){
$scope.technologies = [
		{name:'C#', likes:'0', dislikes:'0'},
		{name:'.Net', likes:'0', dislikes:'0'},
		{name:'Java', likes:'0', dislikes:'0'},
		{name:'MySQL', likes:'0', dislikes:'0'}
		];

		$scope.incrementlikes = function(technology){
		technology.likes++;
		}
		$scope.incrementdislikes = function(technology){
		technology.dislikes++;
		}
		$scope.addRecord = function(){
		$scope.technologies.push({name:$scope.newTechnology, likes:'0', dislikes:'0'});
		}
});

table,
th,
tr,
td {
  border: 2px solid #fff;
  border-collapse: collapse;
}

td,
th {
  background: #006688;
  color: #fff;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table style="width:400px;">
    <tr>
      <td align="right">Enter Technologies : </td>
      <td><input type="text" ng-model="newTechnology"/></td>
      <td><input type="button" value="Add" ng-click="addRecord();" /></td>
    </tr>
  </table>
  <table style="width:400px;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Likes</th>
        <th>Dislikes</th>
        <th>Likes / Dislikes</th>
      </tr>
      <tr ng-repeat="technology in technologies">
        <td>{{technology.name}}</td>
        <td align="center">{{technology.likes}}</td>
        <td align="center">{{technology.dislikes}}</td>
        <td align="center">
          <input type="button" value="Likes" ng-click="incrementlikes(technology);" />
          <input type="button" value="Dislikes" ng-click="incrementdislikes(technology);" />
        </td>
      </tr>
    </thead>
  </table>
</div>

Sunil Kumar Sahu · Accepted Answer · 2018-05-24 11:57:29Z

Need to do below changes to your code.

Add ng-model="techName" to the text field
Change argument of ng-click (ng-click="addRecord(techName);") from "technology" to "techName"(this is ng-model name), it binds text field to this argument.

var app = angular.module("myApp",[]);
app.controller("myCtrl", function($scope){
$scope.technologies = [
		{name:'C#', likes:'0', dislikes:'0'},
		{name:'.Net', likes:'0', dislikes:'0'},
		{name:'Java', likes:'0', dislikes:'0'},
		{name:'MySQL', likes:'0', dislikes:'0'}
		];

		$scope.incrementlikes = function(technology){
		technology.likes++;
		}
		$scope.incrementdislikes = function(technology){
		technology.dislikes++;
		}
		$scope.addRecord = function(text){
		$scope.technologies.push({name:text, likes:'0', dislikes:'0'});
		}
});

table,
th,
tr,
td {
  border: 2px solid #fff;
  border-collapse: collapse;
}

td,
th {
  background: #006688;
  color: #fff;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table style="width:400px;">
    <tr>
      <td align="right">Enter Technologies : </td>
      <td><input type="text" ng-model="techName"/></td>
      <td><input type="button" value="Add" ng-click="addRecord(techName);" /></td>
    </tr>
  </table>
  <table style="width:400px;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Likes</th>
        <th>Dislikes</th>
        <th>Likes / Dislikes</th>
      </tr>
      <tr ng-repeat="technology in technologies">
        <td>{{technology.name}}</td>
        <td align="center">{{technology.likes}}</td>
        <td align="center">{{technology.dislikes}}</td>
        <td align="center">
          <input type="button" value="Likes" ng-click="incrementlikes(technology);" />
          <input type="button" value="Dislikes" ng-click="incrementdislikes(technology);" />
        </td>
      </tr>
    </thead>
  </table>
</div>

Collectives™ on Stack Overflow

How to add an object to array on base of text box value within ng-click action

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related