I have started learning AngularJS and facing issue while injecting a service which is in another file. I have tried many ways but nothing is working out.
This is my index.html:
` <!DOCTYPE html>
<html ng-app="employeedirectory" ng-controller="homeController as vm">
<head>
<title>Employee Directory</title>
<link type="text/css" rel="stylesheet" href="./../bootstrap.min.css" />
</head>
<body>
<div class="container" >
<br/>
<h1 align="center">Employee Directory</h1><br/><br/>
<table class="table">
<thead>
<tr>
<td>Name</td>
<td>Email</td>
<td>Date of Birth</td>
<td>Department</td>
<td>Gender</td>
<td>Age</td>
</tr>
</thead>
<tbody>
<tr>
<form>
<td>
<input class="form-control" ng-model="employee.name" required placeholder="Name" />
</td>
<td>
<input type="email" ng-model="employee.email" required class="form-control" placeholder="abc#xyz.com" />
</td>
<td>
<input type="text" ng-model="employee.dob" id="datepicker" class="form-control" required placeholder="YYYY-MM-DD" />
</td>
<td>
<input ng-model="employee.department" required class="form-control" placeholder="Department" />
</td>
<td>
<input ng-model="employee.gender" required class="form-control" placeholder="Gender" />
</td>
<td>
<input type="number" ng-model="employee.age" disabled class="form-control" placeholder="Age" />
</td>
<td>
<button class="btn btn-primary btn-md" ng-click="vm.addEmployee()">Add Employee</button>
<td><button class="btn btn-info btn-md" ng-click="updateEmployee()">Update Employee</button></td>
</td>
</form>
</tr>
</tbody>
</table>
</div>
<script src="./../angular.min.js"></script>
<script src="./home.controller.js"></script>
</body>
</html>`
This is my controller:
(function () {
'use strict';
angular.module('employeedirectory', [])
.controller('homeController', ['homeService',homeController]);
function homeController() {
var vm = this;
vm.addEmployee = function () {
console.log("in add employee");
// homeService.addEmployee();
}
}
})();
this is my service
(function () {
'use strict';
angular
.module('employeedirectory')
.service('homeService', homeService);
function homeService() {
// var service = {};
// service.addEmployee = function (details) {
// console.log("in home service");
// };
// return service;
}
})();
I am getting this error:
angular.min.js:123 Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=homeServiceProvider%20%3C-%20homeService%20%3C-%20homeController
at angular.min.js:6
at angular.min.js:45
at Object.d [as get] (angular.min.js:43)
at angular.min.js:45
at d (angular.min.js:43)
at e (angular.min.js:43)
at Object.invoke (angular.min.js:43)
at S.instance (angular.min.js:94)
at n (angular.min.js:69)
at g (angular.min.js:61)
you have to reference your service in the index.html
<html>
<head>
<title>Employee Directory</title>
<link type="text/css" rel="stylesheet" href="./../bootstrap.min.css" />
</head>
<body>
// .....
<script src="./../angular.min.js"></script>
<script src="./home.controller.js"></script>
<script src="./homeService.js"></script>
</body>
This way the controller will know what you are trying to inject.
Related
**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
</head>
<body>
<table>
<tr>
<td>Student Name</td>
<td><input type="text" id="sname" required /></td>
</tr>
<tr>
<td>Course</td>
<td>
<select id="course" required>
<option value="Python">Python</option>
<option value="Java">Java</option>
<option value="Oracle">Oracle</option>
</select>
</td>
</tr>
</table>
<input type="button" value="Register" id="submit" onclick="display()" />
<div id="greet"></div>
</body>
</html>
script.js
function display(){
var name = document.getElementById("sname")
var subject = document.getElementById("course")
var greet = document.getElementById("greet")
if(!name.value){
greet.innerHTML = "Name cannot be empty"
} else {
greet.innerHTML = `Hi, ${name.value}. You have successfully registered for the ${subject.value} course.`
}
return false
}
I want to pass the test cases of online platform judge
but It is throwing the error Error Message : illegal character
But according to me the code is correct. Please help to understand way I am getting this error.
I am a bit confused with this. How to save multiple row data in laravel using ajax? The idea is to add products and when click on submit button I want to save the table data in database. I am getting an error as invalid argument supplied for foreach in my controller.
This is my blade template with script.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Products Invoice</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="row" id="invoice-data">
<div class="col-md-12">
<table class="table table-bordered" id="main_table">
<thead>
<tr>
<th scope="col">Product Name</th>
<th scope="col">Description</th>
<th scope="col">Price</th>
<th scope="col">Qty</th>
{{--<th scope="col">Discount</th>--}}
<th scope="col">Amount</th>
<th scope="col">
<button class="btn btn-success addRow">Add More</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="product_name[]" class="form-control productname" id="row_0">
<option>Select Product</option>
#foreach($products as $product)
<option name="product_name[]" value="{{$product->id}}">{{$product->name}}</option>
#endforeach
</select>
</td>
<td><input type="text" name="description[]" class="form-control description" readonly></td>
<td><input type="text" id="price" name="price[]" class="form-control price"
onkeyup="rateChange($(this));" readonly></td>
<td><input type="text" name="qty[]" class="form-control qty" onkeyup="qtyChange($(this));"
onkeypress='return onlynumbers(event);'></td>
{{--<td><input type="text" name="dis[]" class="form-control dis"></td>--}}
<td><input type="text" name="amount[]" id="amount" class="form-control amount" readonly></td>
<td><a class="btn btn-danger remove">X</a></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
<div class="form-group float-right">
<label for="discount"><b>SubTotal</b></label>
<input type="text" name="subTotal[]" id="subTotal" class="subTotal">
</div>
</div>
<div class="col-md-12">
<div class="form-group float-right">
<label for="discount"><b>Discount <span>%</span></b></label>
<input type="text" name="discount[]" id="discount" class="discount" onkeyup="amount_discount();"
onkeypress='return onlynumbers(event);'>
</div>
</div>
<div class="col-md-12">
<div class="form-group float-right">
<label for="SubTotal"><b>Total</b></label>
<input type="text" name="total[]" id="total" class="total" readonly>
</div>
</div>
<div class="col-md-12">
<div class="form-group float-right">
<button type="button" id="saveInvoice" name="saveInvoice" class="btn btn-success float-right">Submit</button>
</div>
</div>
</div>
</div>
</body>
<script>
$("#saveInvoice").click(function () {
$.ajax({
url: "{{ route('invoice.store') }}",
method: "POST",
data: $("#invoice-data").serialize(),
dataType: "json",
success: function (data) {
console.log(data);
}
});
});
</script>
</html>
And this is my controller to store the data.
public function store(Request $request)
{
$invoices = [];
foreach ($request->input('product_name') as $key => $value) {
$invoices["product_name.{$key}"] = 'required';
$invoices["description.{$key}"] = 'required';
$invoices["price.{$key}"] = 'required';
$invoices["qty.{$key}"] = 'required';
$invoices["amount.{$key}"] = 'required';
$invoices["subTotal.{$key}"] = 'required';
$invoices["discount.{$key}"] = 'required';
$invoices["total.{$key}"] = 'required';
}
$validator = Validator::make($request->all(), $invoices);
if ($validator->passes()) {
foreach ($request->input("product_name") as $key => $value) {
$invoice = new Invoice;
$invoice->product_name = $request->get("product_name")[$key];
$invoice->description = $request->get("description")[$key];
$invoice->price = $request->get("price")[$key];
$invoice->qty = $request->get("qty")[$key];
$invoice->amount = $request->get("amount")[$key];
$invoice->subTotal = $request->get("subTotal")[$key];
$invoice->discount = $request->get("discount")[$key];
$invoice->total = $request->get("total")[$key];
$invoice->save();
}
}
}
It returns me 500 internal server error.
I think you need to print the "$request->input('product_name')" before foreach loop to check product name is coming is an array or not? because error you are getting is " invalid argument supplied for foreach in my controller". Just write print_r($request->input('product_name')) and check value is coming is an array or not?
I use AngularJs to achieve submit function. When I click submit button, It does not save the form and show the data. Where am I wrong. Could you please help to check it. Thanks !
(function() {
var app = angular.module('store', []);
var movies = [{
name: 'People Places Things',
releaseDay: '14/08/2015',
Duration: '85 mins',
Genre: 'Comedy',
Synopsis: 'sdfasdfasdfsadfasdfsadfasdf',
}];
app.controller('StoreController', function() {
this.products = movies;
});
app.controller("MovieController", function() {
this.movie = {};
this.addMovie = function(product) {
product.movies.push(this.movie);
this.movie = {};
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="store">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link href="main.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<h1>Moives Recommendation</h1>
<p>
<div>
<table style="width: 80%">
<tr>
<th>Title</th>
<th id="mvTitle">{{product.name}}</th>
</tr>
<tr>
<th>Release date</th>
<th>{{product.releaseDay}}</th>
</tr>
<tr>
<th>Duration</th>
<th>{{product.Duration}}</th>
</tr>
<tr>
<th>Genre</th>
<th>{{product.Genre}}</th>
</tr>
<tr>
<th>Synopsis</th>
<th>{{product.Synopsis}}</th>
</tr>
</table>
</div>
<div>
<form name="movieForm" ng-controller="MovieController as movieCtrl" ng-submit="movieCtrl.addMovie(product)">
<table style="width: 80%">
<tr>
<th>Title</th>
<th>{{movieCtrl.product.name}}</th>
</tr>
<tr>
<th>Release date</th>
<th>{{movieCtrl.product.releaseDay}}</th>
</tr>
<tr>
<th>Duration</th>
<th>{{movieCtrl.product.Duration}}</th>
</tr>
<tr>
<th>Genre</th>
<th>{{movieCtrl.product.Genre}}</th>
</tr>
<tr>
<th>Synopsis</th>
<th>{{movieCtrl.product.Synopsis}}</th>
</tr>
</table>
<br>Title:<input ng-model="movieCtrl.product.name" type="text" name="Title" /><br> Release date:<input ng-model="movieCtrl.product.releaseDay" type="text" name="ReleaseDate" /><br> Duration: <input ng-model="movieCtrl.product.Duration" type="text"
name="Duration" /><br> Genre:
<input ng-model="movieCtrl.product.Genre" type="text" name="Genre" /><br> Synopsis:
<textarea ng-model="movieCtrl.product.Synopsis"></textarea><br>
<input type="submit" value="Submit" />
</form>
</div>
</p>
</div>
</body>
</html>
I use AngularJs to achieve submit function. When I click submit button, It does not save the form and show the data. Where am I wrong. Could you please help to check it. Thanks !
I think the problem is in the addMovie function, but I can not find it.
You have a lot of things wrong in your code, here is working snippet
Note:Using $rootScope is not recommended but you have different controller setup in your code, thats why i tried $rootScope approach but you should use services to do this kind of Task:
(function() {
var app = angular.module('store', []);
var movies = [{
name: 'People Places Things',
releaseDay: '14/08/2015',
Duration: '85 mins',
Genre: 'Comedy',
Synopsis: 'sdfasdfasdfsadfasdfsadfasdf',
}];
app.controller('StoreController', function($rootScope) {
$rootScope.products = movies;
});
app.controller("MovieController", function($rootScope) {
this.product = {};
this.addMovie = function(product) {
$rootScope.products.push(product);
this.product = {};
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="store">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link href="main.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body ng-controller="StoreController as store">
<div >
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<h1>Moives Recommendation</h1>
<div ng-repeat="product in $root.products">
<table style="width: 80%">
<tr>
<th>Title</th>
<th id="mvTitle">{{product.name}}</th>
</tr>
<tr>
<th>Release date</th>
<th>{{product.releaseDay}}</th>
</tr>
<tr>
<th>Duration</th>
<th>{{product.Duration}}</th>
</tr>
<tr>
<th>Genre</th>
<th>{{product.Genre}}</th>
</tr>
<tr>
<th>Synopsis</th>
<th>{{product.Synopsis}}</th>
</tr>
</table>
</div>
<div>
<form name="movieForm" ng-controller="MovieController as movieCtrl" ng-submit="movieCtrl.addMovie(movieCtrl.product)">
<br>Title:<input ng-model="movieCtrl.product.name" type="text" name="Title" /><br> Release date:<input ng-model="movieCtrl.product.releaseDay" type="text" name="ReleaseDate" /><br> Duration: <input ng-model="movieCtrl.product.Duration" type="text"
name="Duration" /><br> Genre:
<input ng-model="movieCtrl.product.Genre" type="text" name="Genre" /><br> Synopsis:
<textarea ng-model="movieCtrl.product.Synopsis"></textarea><br>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>
In addMovie function, you should add movie to movies array only. correct function would be like:
this.addMovie = function(product) {
movies.push(this.movie);
this.movie = {};
};
Other than that, you have some serious issues in your code like
Loading angular more than once.
Using form in ng-repeat itself.
I think it should be like this. Because you are using controllerAs syntax so this you should put controllerAs variable before functions or objects.
ng-submit="movieCtrl.addMovie(movieCtrl.product)"
Edit:
You have some problem in the sample. Because you are using multiple controller and each controller is responsible for some action. After add new product by MovieController you should emit it for StoreController to display newest product in the view. So for communication two controller you can use $broadcast and $on function. As you see in the demo.
and other problem was in displaying products. for displaying the products you should use nested ng-repeat.
Demo
(function() {
var app = angular.module('store', []);
var movies = [{
name: 'People Places Things',
releaseDay: '14/08/2015',
Duration: '85 mins',
Genre: 'Comedy',
Synopsis: 'sdfasdfasdfsadfasdfsadfasdf',
}];
app.controller('StoreController', function($rootScope) {
$rootScope.products = movies;
});
app.controller("MovieController", function($rootScope) {
this.product = {};
this.addMovie = function(product) {
$rootScope.products.push(product);
this.product = {};
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="store">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link href="main.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body ng-controller="StoreController as store">
<div >
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<h1>Moives Recommendation</h1>
<div ng-repeat="product in $root.products">
<table style="width: 80%">
<tr>
<th>Title</th>
<th id="mvTitle">{{product.name}}</th>
</tr>
<tr>
<th>Release date</th>
<th>{{product.releaseDay}}</th>
</tr>
<tr>
<th>Duration</th>
<th>{{product.Duration}}</th>
</tr>
<tr>
<th>Genre</th>
<th>{{product.Genre}}</th>
</tr>
<tr>
<th>Synopsis</th>
<th>{{product.Synopsis}}</th>
</tr>
</table>
</div>
<div>
<form name="movieForm" ng-controller="MovieController as movieCtrl" ng-submit="movieCtrl.addMovie(movieCtrl.product)">
<br>Title:<input ng-model="movieCtrl.product.name" type="text" name="Title" /><br> Release date:<input ng-model="movieCtrl.product.releaseDay" type="text" name="ReleaseDate" /><br> Duration: <input ng-model="movieCtrl.product.Duration" type="text"
name="Duration" /><br> Genre:
<input ng-model="movieCtrl.product.Genre" type="text" name="Genre" /><br> Synopsis:
<textarea ng-model="movieCtrl.product.Synopsis"></textarea><br>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>
I'm trying to validate a form with an array and a loop. I created empty span elements in each required field. Then, in JavaScript I set up this:
var name = document.querySelector('#Name').value,
firstLastName = document.querySelector('#firstLastName').value,
secondLastName = document.querySelector('#secondLastName').value,
username = document.querySelector('#username').value,
dateBirth = document.querySelector('#dateBirth').value,
email = document.querySelector('#email').value,
gender = document.querySelector('#gender').value,
password = document.querySelector('#password ').value,
passwordConfirmation = document.querySelector('#passwordConfirmation').value,
span = document.getElementsByTagName("span"),
personalData = [name, firstLastName, secondLastName, username, dateBirth, email, gender, password, passwordConfirmation],
arrayLength = personalData.length;
for (var i = 0; i < arrayLength; i++) {
if (personalData[i]== '') {
var message = '*Required'
span[i].innerHTML = message; /* THIS PART IS NOT WORKING */
}else {
var message = ''
span[i].innerHTML = message; /* THIS PART IS NOT WORKING */
}
}
Any idea what the problem is? I'm new on this.
Here's the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Regsitrar</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="container-fluid">
<header class="row">
<img class="col-md-2" src="./img/cenfotec-logo.png" alt="Music Logo" width="167px" height="80px"/>
<h1 class="col-md-6">Welcome!</h1>
</header>
<section id="form" class="row">
<form class="col-md-6 col-md-offset-3" id="registrationForm" name="RegistrationForm">
<h2>Registration</h2>
<table>
<tr>
<td >
<input type="text" placeholder="Name" id="Name"> <br>
<span id="errorName" class="span"></span>
</td>
<td>
<input type="text" placeholder="Last Name" id="firstLastName">
<span id="errorFirstLastName" class="span"></span>
</td>
<td>
<input type="text" placeholder="Second Last Name" id="secondLastName">
<span id="errorSecondLastName" class="span"></span>
</td>
</tr>
<tr>
<td colspan="3">
<input type="text" placeholder="Username" id="username">
</td>
</tr>
<tr>
<td colspan="3">
<label for="dateBirth">Date of Birth: </label>
</td>
</tr>
<tr>
<td colspan="3">
<input type="date" id="dateBirth">
</td>
</tr>
<tr>
<td colspan="3">
<input type="email" placeholder="Email Address" id="email">
</td>
</tr>
<tr>
<td colspan="3">
<select id="gender">
<option value="">--Select Gender--</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
</tr>
<tr>
<td colspan="3">
<input type="password" placeholder="Password" id="password">
</td>
</tr>
<tr>
<td colspan="3">
<input type="password" placeholder="Confirm Password" id="passwordConfirmation">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Create Account" id="btnRegistration">
</td>
</tr>
</table>
</form>
</section>
<script type="text/javascript" src="js/logicIU.js"></script>
</body>
</html>
It seems pretty wired to me that getElementsByTagName not working on span element.
For working code you can try this
<span class='.span'>Data1</span>
<span class='.span'>Data2</span>
var x = document.getElementsByClassName(".span");
x[1].innerHTML = 'works';
Here JsFiddle https://jsfiddle.net/s4cdLrcg/1/
If you are getting undefined error on span elements probably you loading script before the dom elements finishs its loading.
Try to Load your script at bottom of your html page then it will work.
You can look at the snippet below which confirms you don't have any issues with your script.
You should place the scripts after the html elements same as the below snippet.
Note: I have put the scripts inside the validate() function so that, when you type something and click the button, you can see the validation message removed.
But this snippet will work without the function as you did above.
<div>
<input type="text" id="Name" /> <span></span>
</div>
<div>
<input type="text" id="firstLastName" /> <span></span>
</div>
<div>
<input type="text" id="secondLastName" /> <span></span>
</div>
<div>
<input type="text" id="username" /> <span></span>
</div>
<input type="button" value="Validate" onclick="validate()" />
<script>
function validate() {
var name = document.querySelector('#Name').value,
firstLastName = document.querySelector('#firstLastName').value,
secondLastName = document.querySelector('#secondLastName').value,
username = document.querySelector('#username').value,
//dateBirth = document.querySelector('#dateBirth').value,
//email = document.querySelector('#email').value,
//gender = document.querySelector('#gender').value,
//password = document.querySelector('#password ').value,
//passwordConfirmation = document.querySelector('#passwordConfirmation').value,
span = document.getElementsByTagName("span"),
personalData = [name, firstLastName, secondLastName, username], //, dateBirth, email, gender, password, passwordConfirmation],
arrayLength = personalData.length;
for (var i = 0; i < arrayLength; i++) {
var message = '';
if (personalData[i] == '') {
message = '*Required';
}
span[i].innerHTML = message; /* THIS PART IS NOT WORKING */
}
}
validate();
</script>
You need to place your code inside function (i.e)
<input type="button" value="Validate" onclick="validate()" />
function validate(){
//Your code
}
*here is html codei am trying to fetch checkbox value which are coming from database but my checkbox is not selected any value,only checkbox is showing but not selecting any value....
ng-controller="noduesaccountsmodalcontroller" ng-init="init()">
<form name="accounts" ng-submit=submit(accounts) novalidate>
<table class="table">
<thead>
<tr>
<th>item</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueaccountassets">
<tr>
<td>{{emp}}</td> <td> <input type="checkbox" ng-model="emp.selected" value="{{emp.name}}"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{{albumNameArray}}
<!-- <input type="checkbox" value="{{emp}}" ng-model="checked" ng-init="checked=true"{{emp}}><br /> -->
<button type="submit" value="submit" class="btn btn-primary">ACCEPT</button>
<button class="btn btn-warning" ng-click="popup.$rollbackViewValue();">REJECT</button>
js controller code is
application.controller('noduesaccountsmodalcontroller',function ($scope,$http,$window,$modal,$filter)
$scope.nodueaccountassets=data.list;
/*alert($scope.nodueaccountassets)*/
})
})
$scope.submit=function(form){
$scope.albumNameArray = [];
angular.forEach($scope.nodueaccountassets,function(emp){
if (emp.selected) $scope.albumNameArray.push(emp.name);
alert(emp.selected);
/*$scope.albumNameArray = $scope.nodueaccountassets.filter(function(emp){
return emp.selected;
alert(emp.selected);*/
})
/*var emp_data='emp_assets='+$scope.nodueaccountassets+'&accounts_comments='+$scope.empcomments+'&emp_code='+$scope.emplycode;
alert("data is"+emp_data)
$http.get(domain+'/insertaccountassets?'+emp_data)
.success(function(data, status, headers, config){
alert('submit successfully');
})
.error(function(data, status, headers, config){
alert(data);
})
alert("error while submitting")
}
$scope.reject=function(form)
{
$modal.dismiss('reject');
var emp_data='accounts_comments='+$scope.empcomments+'& emp_code='+$scope.emplycode;
alert(emp_data)
$http.get(domain+'/insertaccountassets?'+emp_data)
}*/
}
});
I have made a plunker out of your provided code and made some tweaks to your HTML and JS code.
Make sure your JSON data has objects in the array so that when you create .selected property to the array object and assign as ng-model to your checkbox it woks properly
In HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="noduesaccountsmodalcontroller" ng-init="init()">
<form name="accounts" ng-submit="submit(accounts)" novalidate="">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueaccountassets">
<tr>
<td>{{emp.name}}</td>
<td>
<input type="checkbox" ng-model="emp.selected" value="{{emp.name}}" />
</td>
</tr>
</tbody>
</table>
{{selectedItems}}
<!-- <input type="checkbox" value="{{emp}}" ng-model="checked" ng-init="checked=true"{{emp}}><br /> -->
<button type="submit" value="submit" class="btn btn-primary">ACCEPT</button>
<button class="btn btn-warning" ng-click="popup.$rollbackViewValue();">REJECT</button>
</form>
</body>
</html>
In JS
var app = angular.module('app',[]);
app.controller('noduesaccountsmodalcontroller',function($scope){
$scope.nodueaccountassets = [{'name':'x'},{'name':'a'},
{'name':'b'},{'name':'c'},{'name':'d'}];
$scope.init= function(){
};
$scope.selectedItems =[];
$scope.submit = function(acc){
angular.forEach($scope.nodueaccountassets,function(emp){
if(emp.selected){
$scope.selectedItems.push(emp.name);
}
});
};
});