Как добавить объект в массив на основе значения текстового поля в действии ng-click

Question

Как добавить технологию, которая вводится в текстовое поле в виде записи, когда я нажимаю кнопку добавления в действии ng-click, необходимом для моей таблицы?

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>

Answer 1

Требуется только небольшое исправление кода в функции addRecord.Найдите решение ниже: -

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>

Answer 2

Необходимо внести следующие изменения в ваш код.

1. Добавить ng-model = "techName" в текстовое поле
2. Изменить аргумент ng-щелкните ( ng-click = "addRecord (techName);" ) из "technology" в "techName" (это имя модели ng), текстовое поле будет привязано к этому аргументу.

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>

Answer 3

пожалуйста, проверьте ссылку ниже, вы можете найти решение

$ scope.technology = technology.push (); // неверный путь

$ scope.technologies.push (technology) // Wright способ нажать на массив

 $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>

Answer 4

Добавить newTechName переменную в контроллере.Привязать его к текстовому полю.

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

Теперь вы можете использовать его в 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>

Answer 5

Вот рабочий код, который вам нужно использовать ng-model в поле ввода, чтобы получить значение из этого текстового поля и инициализировать его в контроллере, а затем вставить его в $ 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>

Answer 6

Вам нужно добавить ng-model к вашему входу, чтобы принять какое-то имя для технологии .Затем добавьте запись с объектом, например, addRecord({'name':name,'likes':0,'dislikes':0}).Это должно заполнить существующий массив нажатием: $scope.technologies.push(technology);.

Вот демоверсия:

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>

Answer 7

В угловых не требуется передавать параметр.Вы можете использовать угловое связывание данных для записи непосредственно в переменную контроллера, например:

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

Разметка

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