It's good practice to use the controllerAs syntax. Whenever you use the ngIf directive it creates it's own scope and so by referencing the parent controller by it's controllerAs syntax, you can always be sure to access it's data (and know where the data comes from!).
Here we declare an array named applicants and an array named hired and set them to be a properties of the controller.
We can then "hire" an applicant by calling the hire method (also a property of the controller) passing in the applicant to hire. We simply then add it to the array of hired applicants.
When we want to remove the applicant, we call our remove method (also a property of the controller) passing in the applicant to remove. We simply then remove it from the hired array by getting it's index and splicing the hired array.
We also use track by applicant.id in the ngRepeat directive to minimise the creation of DOM elements as per the documentation.
You can know if the applicant is hired or not because it's either in the hired array or it's not.
// app.js
(function() {
'use strict';
angular.module('app', []);
})();
// main.controller.js
(function() {
'use strict';
angular.module('app').controller('MainController', MainController);
MainController.$inject = [];
function MainController() {
var vm = this;
// setup your applicants
vm.applicants = [{
'id': 1,
'name': 'John Doe',
'value': 100
},
{
'id': 2,
'name': 'Jack Smith',
'value': 120
},
{
'id': 3,
'name': 'Sarah Doe',
'value': 80
}
];
// setup your empty hired array
vm.hired = [];
// expose any functions you need to access from the view here
vm.hire = hire;
vm.remove = remove;
/*
* @name hire
* @type function
*
* @description
* Hires an applicant by adding the applicant to the hired array
*
* @param {applicant} The applicant to hire
* @return nothing.
*/
function hire(applicant) {
// make sure vm.hired is an array
vm.hired = angular.isArray(vm.hired) ? vm.hired : [];
// push the new item into the array
vm.hired.push(applicant);
}
/*
* @name remove
* @type function
*
* @description
* Removes an applicant from the hired array
*
* @param {applicant} The applicant to remove
* @return nothing.
*/
function remove(applicant) {
// get the applicant's index
var index = vm.hired.indexOf(applicant);
// remove the applicant
vm.hired.splice(index, 1);
}
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController as MainCtrl">
<h2>Applicants</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="applicant in MainCtrl.applicants track by applicant.id">
<td>{{applicant.id}}</td>
<td>{{applicant.name}}</td>
<td>{{applicant.value}}</td>
<td>
<a href ng-if="MainCtrl.hired.indexOf(applicant) === -1" ng-click="MainCtrl.hire(applicant)">Hire</a>
<a href ng-if="MainCtrl.hired.indexOf(applicant) > -1" ng-click="MainCtrl.remove(applicant)">Remove</a>
</td>
</tr>
</tbody>
</table>
<h2>Hired</h2>
<pre>{{MainCtrl.hired | json}}</pre>
<div>
For demonstrative purposes, another option is to modify the applicant itself by toggling a boolean on the applicant object (you will not then need a hire or remove method). However, I'm sure you'd want to do something else when an applicant is hired e.g. making a request to the server to update the applicant details.
// app.js
(function() {
'use strict';
angular.module('app', []);
})();
// main.controller.js
(function() {
'use strict';
angular.module('app').controller('MainController', MainController);
MainController.$inject = [];
function MainController() {
var vm = this;
// setup your applicants
vm.applicants = [{
'id': 1,
'name': 'John Doe',
'value': 100
},
{
'id': 2,
'name': 'Jack Smith',
'value': 120
},
{
'id': 3,
'name': 'Sarah Doe',
'value': 80
}
];
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController as MainCtrl">
<h2>Applicants</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Value</th>
<th>Hired</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="applicant in MainCtrl.applicants track by applicant.id">
<td>{{applicant.id}}</td>
<td>{{applicant.name}}</td>
<td>{{applicant.value}}</td>
<td>{{applicant.hired ? 'Hired' : 'Not hired'}}</td>
<td>
<a href ng-click="applicant.hired = !applicant.hired">Toggle hired</a>
</td>
</tr>
</tbody>
</table>
<pre>{{MainCtrl.applicants | json}}</pre>
<div>
