ng-fileupload having injection error on angular 1.2.3 my source code attached here
<!DOCTYPE html>
<html ng-app ="dashboard">
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
</head>
<body>
<div class="box-content">
<form ng-controller="mycontroller as up" name="up.upload_form">
<table cellspacing="10" cellpadding="10" style="margin-left: 5%; cellspacing= 7;">
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Name</label></td>
<td>
<input type="text" name="coursename" ng-model=" up.coursename" placeholder="Enter course name here" class="form-control">
</td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Code</label></td>
<td><input type="text" name="coursecode" ng-model=" up.coursecode" placeholder="Enter course code here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Title</label></td>
<td><input type="text" name="coursetitle" ng-model=" up.coursetitle" placeholder="Enter course title here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Authur</label></td>
<td> <input type="text" name="courseauthor" ng-model=" up.courseauthor" placeholder="Enter author name here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Discription</label></td>
<td><textarea name="coursediscription" ng-model=" up.coursediscription" placeholder="Enter course description here"></textarea></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course urlpath</label></td>
<td> <input type="text" name="courseurlpath" ng-model=" up.courseurlpath" placeholder="Enter course url path here" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Start Date</label></td>
<td> <input type="date" name="coursestartingdate" ng-model=" up.coursestartingdate" placeholder="start" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course End Date</label></td>
<td><input type="date" name="courseendingdate" ng-model=" up.courseendingdate" placeholder="end" class="form-control"></td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Attachments</label></td>
<td><input type="file" ngf-select ng-model="up.file" name="file" ngf-pattern="'image/*,application/pdf'" accept="image/*,application/pdf" ngf-max-size="20MB" class="form-control">
</td>
</tr>
<tr>
<td>
<label class="control-label" for="inputSuccess1">Course Video</label></td>
<td><input type="file" ngf-select ng-model="up.file1" name="file1" ngf-pattern="'image/*,application/pdf'" accept="image/*,application/pdf" ngf-max-size="20MB" class="form-control">
</td>
</tr>
<tr>
<td>
Image thumbnail: <img style="width:100px;" ng-show="!!up.file" ngf-thumbnail="up.file || '/thumb.jpg'" />
</td>
<td>
<i ng-show="up.upload_form.file.$error.required">*required</i><br>
<i ng-show="up.upload_form.file.$error.maxSize">File too large
{{up.file.size / 1000000|number:1}}MB: max 20M</i>
</td>
</tr>
<tr>
<td>
<button type="submit" ng-click="up.submit()" class="btn btn-success">submit</button>
<p>{{up.progress}}</p>
</form>
</td>
</tr>
<br>
</table>
</form>
</div>
</body>
<script type="text/javascript">
//var dashboard = angular.module('dashboard', ['Upload','$window''ngRoute']);
var dashboard = angular.module('dashboard', ['ui.router','Upload','$window']);
dashboard.controller('mycontroller',['Upload', '$window',function($scope,Upload, $window){
var vm = this;
vm.submit = function() {
alert("HAi")
//function to call on form submit
/* if (vm.upload_form.file.$valid && vm.file) {*/
//check if from is valid
/*vm.upload(vm.file, vm.file1, vm.coursename, vm.coursecode, vm.coursetitle, vm.courseauthor, vm.coursediscription, vm.courseurlpath, vm.coursestartingdate, vm.courseendingdate); //call upload function*/
// }
}
}]);
/* dashboard.controller('MyCtrl', ['Upload', '$window', function(Upload, $window) {
var vm = this;
vm.submit = function() {
//function to call on form submit
if (vm.upload_form.file.$valid && vm.file) {
//check if from is valid
vm.upload(vm.file, vm.file1, vm.coursename, vm.coursecode, vm.coursetitle, vm.courseauthor, vm.coursediscription, vm.courseurlpath, vm.coursestartingdate, vm.courseendingdate); //call upload function
}
}
vm.upload = function(file, file1, coursename, coursecode, coursetitle, courseauthor, coursediscription, courseurlpath, coursestartingdate, courseendingdate) {
alert("success");
Upload.upload({
url: 'http://192.168.1.16:8080/courseapi/create', //webAPI exposed to upload the file
data: {
file: file,
file1: file1,
coursename: coursename,
coursecode: coursecode,
coursetitle: coursetitle,
courseauthor: courseauthor,
coursediscription: coursediscription,
courseurlpath: courseurlpath,
coursestartingdate: coursestartingdate,
courseendingdate: courseendingdate
} //pass file as data, should be user ng-model
}).then(function(resp) {
console.log("Upload file::::" + JSON.stringify(resp));
//upload function returns a promise
if (resp.data.success === true) {
//validate success
$window.alert(resp.config.data.file.name + ' Successfully uploaded.');
} else {
$window.alert('an error occured');
}
}, function(resp) {
//catch error
console.log('Error status: ' + resp.status);
$window.alert('Error status: ' + resp.status);
}, function(evt) {
console.log(evt);
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
});
};
}]);*/
</script>
</html>
unable to hit angularjs controller
Error stack:angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.3/$injector/modulerr?p0=dashboard&p1=Error%…0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%2Fangular.min.js%3A28%3A374)
You don't have to inject $window and Upload to a module unless they are angualr modules,
So it should be,
var dashboard = angular.module('dashboard', ['ui.router']);
You are not injecting $scope to your function, change your controller like this,
dashboard.controller('mycontroller',['$scope','$window', 'Upload',function($scope,$window, Upload){
}]);
Related
HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<h3 align="center">Registration Form</h3>
<div ng-app="myapp" ng-controller="usercontroller">
<input type="hidden" ng-value="id" name="id" ng-model="id" class="form-control" />
<label>First Name</label>
<input type="text" ng-value="name" name="first_name" ng-model="firstname" class="form-control" />
<br />
<label>Last Name</label>
<input type="text" ng-value="lname" name="last_name" ng-model="lastname" class="form-control" />
<br />
<input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="ADD"/>
<hr>
<p style="text-align: center;">User List</p>
<hr>
<table class="table table-striped">
<tr >
<td>S.no</td>
<td>First Name</td>
<td>Last Name</td>
<td style="text-align: center;" ng-click=>Action</td>
</tr>
<tr ng-repeat="x in names">
<td>{{$index +1}}</td>
<td>{{x.first_name}}</td>
<td>{{x.last_name}}</td>
<td>Delete</td>
<td>Edit</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Script Code:
<script>
var app = angular.module("myapp",[]);
app.controller("usercontroller", function($scope, $http){
$scope.id=0;
$scope.Edit=function(id){
$http.post(
"<?php echo BASE_URL;?>Registration/Edit",
{id :id}
).then(function(response){
$scope.name = response.data.first_name;
$scope.lname = response.data.last_name;
$scope.id = response.data.id;
});
}
$scope.Delete=function(id){
$http.post(
"<?php echo BASE_URL;?>Registration/Del",
{id :id}
).then(function(response){
name();
//alert('ok');
});
}
$scope.insertData = function(){
if($scope.id==0){
$http.post(
"<?php echo BASE_URL;?>Registration/add",
{'firstname':$scope.firstname, 'lastname':$scope.lastname}
).then(function(response){
name();
$scope.firstname = null;
$scope.lastname = null;
});
}
else{
//Here i am not getting the change value from the text box it give me the same value or old value from the text field
alert($scope.name);
}
}
var name=function(){
$http.get("<?php echo BASE_URL;?>Registration/view").then(function(response){
$scope.names = response.data;
});
}
name();
});
</script>
This is my front end page for angular crud all listing ,add ,del working fine but the problem is that when i am going to set the value on text field using edit function after how can i get the value after text change its returning me only set value of text after modify this value m not able to get new value please help me related this i am newbe here.
1) You remove ng-value for all the inputs in the HTML
2) in $scope.edit method, append the response data to the models $scope.firstname, $scope.lastname and $scope.id
These two changes should solve your prob. Angular models supports two way binding.
<html ng-controller='myctrl'>
<head>Student creation</head>
<table border=1 width="100%">
<tr style=background-color:lightblue>
<th>username</th>
<th>password</th>
<th>department</th>
<th>action</th>
</tr>
<tr ng-repeat=" student in students" >
<td>{{student.username}}</td>
<td>{{student.password}}</td>
<td>{{student.department}}</td>
<td style=text-align:center>
Edit 
<a onclick="calldeletefun()">delete</a>
<script>
function calldeletefun() {
if (confirm("Do you want to delete student <<student name>>?") == true) {
x = "you pressed ok";
} else
x = "you pressed cancel";
document.getElementById("demo").innerHTML = x;
}
</script>
 marks
</td>
</tr>
</table>
<p id="demo"></p>
<head>Student Edit/Add</head>
<br><br>
<body style=text-align:center>
<form role="form" ng-submit="addRow()">
<div>Studentname:
<input type="text" name="username" ng-model="username" style=border-color:blue ><br><br></div>
<div>Password:   
<input type="password" name="password" ng-model="password" style=border-color:blue><br><br></div>
<div>Department:
<input type="text1" name="department" ng-model="department" style=border-color:blue><br><br></div>
<div><input type="submit" value="submit" style="color:white; background-color:green" >
<input type ="submit" style="background-color:red; color:white" value="cancel"></div>
</form>
</body>
</html>
Adding data to table dynamically:
On submitting the form only new row get added but data's given is not getting updated,Following is my controller code
var app = angular.module('myapp', ['ngRoute'])
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'table.html'
})
.when('/table1',
{
templateUrl : 'table.html'
})
.otherwise({
redirectTo : '/'
});
});
app.controller('myctrl', function ($scope) {
$scope.students = [{
'username' : 'user1',
'password' : 'user1',
'department' : 'cse'
}, {
'username' : 'user2',
'password' : 'user2',
'department' : 'IT'
}, ];
$scope.addRow = function () {
$scope.students.push({
username : $scope.username,
'password' : $scope.password,
'department' : $scope.department
});
$scope.username = "";
$scope.password = "";
$scope.department = "";
};
});
What went wrong here ? Can any please debug the code.
put ng-app in your HTML tag like
<html ng-app='myapp' ng-controller='myctrl'>
Remove ng-submit from form tag and put ng-click ="addRow()" on button.
Put return false in addRow function of your controller.
Let me know if this works for you.
The row is not getting added to the table because of the form is getting submitted i.e page is refreshing..
See the working snippet I have added; the problem is with your html.
Maybe this will help you:
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.students=[{'username':'user1','password':'user1','department':'cse'},
{'username':'user2','password':'user2','department':'IT'},];
$scope.addRow=function()
{
$scope.students.push({username:$scope.username,'password':$scope.password,'department':$scope.department});
$scope.username="";
$scope.password="";
$scope.department="";
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="1" data-ng-app="myApp" data-ng-controller="myctrl">
<table border=1 width="100%">
<tr style=background-color:lightblue>
<th>username</th>
<th>password</th>
<th>department</th>
<th>action</th>
</tr>
<tr ng-repeat=" student in students" >
<td>{{student.username}}</td>
<td>{{student.password}}</td>
<td>{{student.department}}</td>
<td style=text-align:center>
Edit 
<a onclick="calldeletefun()">delete</a>
<script>
function calldeletefun()
{
if(confirm("Do you want to delete student <<student name>>?")==true)
{
x="you pressed ok";
}
else
x="you pressed cancel";
document.getElementById("demo").innerHTML=x;
}
</script>
 marks
</td>
</tr>
</table>
<p id="demo"></p>
<h3>Student Edit/Add</h3>
<form role="form" ng-submit="addRow()">
<div>Studentname:
<input type="text" name="username" ng-model="username" style=border-color:blue ><br><br></div>
<div>Password:   
<input type="password" name="password" ng-model="password" style=border-color:blue><br><br></div>
<div>Department:
<input type="text1" name="department" ng-model="department" style=border-color:blue><br><br></div>
<div><input type="submit" value="submit" style="color:white; background-color:green" >
<input type ="submit" style="background-color:red; color:white" value="cancel"></div>
</form>
</div>
I am new to angularJS as well as MVC. Just tried a simple CRUD operation .
The GetallEmployee() and the edit operation call are working fine. However the submit is not working. I am sure there is a lot of blunder in the code .Apologies for that .
Here is my Controller and service and view that I added....
app.controller("myController", ['$scope', '$http', 'angularService', function ($scope, $http, angularService) {
$scope.employees = [];
var fetched = angularService.GetAllEmployee();
fetched.then(function (emps) {
$scope.employees = emps.data;
});
$scope.editEmployee = function (data) {
var Emp = $http({
method: "get",
url: "Home/GetEmployeebyId",
params: {
Id: JSON.stringify(data.ID)
}
}).success(function (Emp) {
$scope.employeeName = Emp.Name;
$scope.employeeId = Emp.ID;
$scope.employeeEmail = Emp.Email;
$scope.employeeAge = Emp.Age;
$scope.Action = "Update";
$scope.IsIndian = Boolean(Emp.IsIndian);
$scope.employeeGender = Emp.Gender;
});
};
$scope.AddUpdateEmployee = function () {
var Employee = {
Id: $scope.employeeId,
Name: $scope.employeeName,
Email: $scope.employeeEmail,
Age: $scope.employeeAge,
Gender: $scope.employeeGender,
IsIndian: $scope.IsIndian,
};
var getAction = $scope.Action;
if (getAction == 'Update') {
Employee.Id = $scope.employeeId;
$http({ method: 'post', url: 'Home/UpdateEmployee', data: JSON.stringify(Employee), datatype: 'json' }).success
(function (output) {
var fetched = angularService.GetAllEmployee();
fetched.then(function (emps)
{
$scope.employees = emps.data;
}
)
ClearFields();
});
}
else {
$http({ method: 'post', url: 'Home/AddEmployee', data: JSON.stringify(Employee), datatype: 'json' }).success
(function () {
var fetched = angularService.GetAllEmployee();
fetched.then(function (emps) {
$scope.employees = emps.data;
alert(output);
ClearFields();
});
}
);
}
$scope.Action = "";
}
////$scope.deleteEmployee = function (employee) {
//// angularService.deleteEmployee(employee.ID).then(function (msg) {
//// GetAllEmployee();
//// alert(msg.data);/////earlier it was a string message in place if msg.data
//// }, function () {
//// alert('Error in Deleting Record');
//// });
////}
function ClearFields() {
$scope.employeeId = "";
$scope.employeeName = "";
$scope.employeeEmail = "";
$scope.employeeAge = "";
$scope.IsIndian = false;
$scope.Gender = 'Male';
}
}]);
app.service("angularService", function ($http) {
//get All Eployee
var temp = this;
temp.employee = [];
this.GetAllEmployee = function () {
return $http.get("Home/GetAll").success(function (emps) {
emps.forEach(function (eachemp) {
eachemp.IsIndian = Boolean(eachemp.IsIndian);
temp.employee.push(eachemp);
})
});
}
});
#{
ViewBag.Title = "Home Page";
}
<div ng-controller="myController as myController" ng-app="MyApp">
<br />
<div>
<table class="table ">
<tr>
<td colspan="6" align="center">
<label style="font-family:Arial ;font-weight:bold">Employee Details</label>
</td>
</tr>
<tr>
<td style="font-weight:bold">Name</td>
<td style="font-weight:bold">Id</td>
<td style="font-weight:bold">Email</td>
<td style="font-weight:bold">Age</td>
<td style="font-weight:bold"></td>
</tr>
<tr ng-repeat="emp in employees">
<td>{{emp.Name}}</td>
<td>{{emp.ID}}</td>
<td>{{emp.Email}}</td>
<td>{{emp.Age}}</td>
<td>
<button ng-click="editEmployee(emp)" type="submit" class="btn btn-primary">Edit</button>
<button ng-click="deleteEmployee(emp)" type="submit" class="btn btn-primary">Delete</button>
</td>
<td>
<input type="checkbox" ng-model="emp.IsIndian" disabled="disabled" name="IndianChk" /> Indian
<input type="radio" disabled="disabled" ng-model="emp.Gender" value="Male"> Male
<input type="radio" disabled="disabled" ng-model="emp.Gender" value="Female" />Female
</td>
</tr>
</table>
</div>
<form name="form" ng-submit="myController.addupdateemployee()">
<table class="table table-responsive">
<tr>
<td>
<label>Employee ID </label>
</td>
<td>
<input type="text" disabled="disabled" ng-model="employeeId" class="form-control" />
</td>
</tr>
<tr>
<td>
<label>Employee Name </label>
</td>
<td>
<div class="form-group" ng-class="{'has-error': form.empname.$invalid && form.empname.$dirty }">
<input type="text" ng-model="employeeName" class="form-control" required name="empname" />
</div>
</td>
</tr>
<tr>
<td>
<label>Employee Email </label>
</td>
<td>
<div class="form-group" ng-class="{'has-error': form.mail.$invalid && form.mail.$dirty }">
<input type="text" ng-model="employeeEmail" class="form-control" required name="mail" />
</div>
</td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<div>
<select class="form-control" ng-model="employeeGender" required>
<option>Male</option>
<option>Female</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Employee Age </label>
</td>
<td>
<div class="form-group">
<input type="number" ng-model="employeeAge" required class="form-control" name="age">
</div>
</td>
</tr>
<tr>
<td>
<label>Is Indian </label> <input type="checkbox" ng-model="IsIndian" ng-required="true" />
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" class="btn btn-primary" name="submit">submit</button>
</td>
</tr>
</table>
</form>
</div>
Change your form tag from:
<form name="form" ng-submit="myController.addupdateemployee()">
to
<form ng-submit="AddUpdateEmployee()" ng-controller="myController">
ok, so this is my AngularJs Controller which have Directive as well.
now when i run application the main page i design for this controller is working but when i tried to re-use it as directive then i cant see anything, the new HTML page is empty.
AngularJS Controller:
var app = angular.module('dropDown', []);
app.controller('DropDownController', function ($scope, $http) {
GetCountries();
function GetCountries() {
$http({
method: 'Get',
url: '/Home/GetCountries'
}).success(function (data) {
$scope.countries = data;
}).error(function (data) {
$scope.message = 'Unexpected Error';
});
}
$scope.GetStates = function () {
var countryId = $scope.country;
if (countryId) {
$http({
method: 'POST',
url: '/Home/GetStates',
data: JSON.stringify({ countryID: countryId })
}).success(function (data) {
$scope.states = data;
}).error(function (data) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.states = null;
}
}
$scope.GetRegion = function () {
var countryId = $scope.country;
if (countryId) {
$http({
method: 'POST',
url: '/Home/GetRegion',
data: JSON.stringify({ countryID: countryId })
}).success(function (data) {
$scope.regions = data;
}).error(function (data) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.regions = null;
}
}
$scope.GetShippingStates = function () {
var countryId2 = $scope.country2;
if (countryId2) {
$http({
method: 'POST',
url: '/Home/GetStates',
data: JSON.stringify({ countryID: countryId2 })
}).success(function (data2) {
$scope.states2 = data2;
}).error(function (data2) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.states2 = null;
}
}
$scope.GetShippingRegion = function () {
var countryId2 = $scope.country2;
if (countryId2) {
$http({
method: 'POST',
url: '/Home/GetRegion',
data: JSON.stringify({ countryID: countryId2 })
}).success(function (data2) {
$scope.regions2 = data2;
}).error(function (data2) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.regions2 = null;
}
}
});
app.directive('dropdowndirective', function () {
return function() {
restrict= 'E',
transclude= true,
templateUrl= '#Url.Action("AddressControl","Home")',
//templateUrl= '/Home/AddressControl',
controller = 'DropDownController',
replace=true
}
});
MVC Controller:
using CountryAddressApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;using System.Web;
using System.Web.Mvc;
namespace CountryAddressApp.Controllers
{
public class HomeController : Controller
{
public ActionResult AddressControl()
{
return View();
}
public JsonResult GetCountries()
{
using (CountryAddressEntities context = new CountryAddressEntities())
{
var ret = context.Countries.Select(x => new { x.CountryID, x.CountryName }).ToList();
return Json(ret, JsonRequestBehavior.AllowGet);
}
}
[HttpPost]
public JsonResult GetStates(int countryId)
{
using (CountryAddressEntities context = new CountryAddressEntities())
{
var ret = context.States.Where(x => x.CountryID == countryId).Select(x => new { x.StateID, x.StateName }).ToList();
return Json(ret);
}
}
[HttpPost]
public JsonResult GetRegion(int countryId)
{
using (CountryAddressEntities context = new CountryAddressEntities())
{
var ret = context.Regions.Where(x => x.CountryID == countryId).Select(x => new { x.RegionID, x.RegionName }).ToList();
return Json(ret);
}
}
public ActionResult Index()
{
return View();
}
public ActionResult Testing()
{
return View();
}
}
}
My Main-Page
AddressControl.cshtml
#{
Layout = null;
}
<!DOCTYPE html>
<html data-ng-app="dropDown">
<head>
<meta name="viewport" content="width=device-width" />
<title>Multi-National Address</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/cascade.js"></script>
</head>
<body data-ng-controller="DropDownController">
<table class="container">
<tr>
<td><b>Billing Address</b></td>
<td><b>Shipping Address</b></td>
</tr>
<tr>
<td>
<div>
<div>
<form name="mainForm" data-ng-submit="sendForm()" novalidate>
<div class="error">{{message}}</div>
<div>
<table>
<tr>
<td>
<label>Select Country: </label>
</td>
<td>
<select data-ng-model="country" data-ng-options="c.CountryID as c.CountryName for c in countries" data-ng-change="GetStates()">
<option value="">-- Select Country --</option>
</select>
</td>
</tr>
</table>
</div>
<div ng-show="country==1">
<table>
<tr>
<td>
<label>Select State: </label>
</td>
<td>
<select data-ng-model="state" data-ng-disabled="!states" data-ng-options="s.StateID as s.StateName for s in states" data-ng-change="GetRegion()">
<option value="">-- Select State --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Select Region: </label>
</td>
<td>
<select data-ng-model="region" data-ng-disabled="!regions" data-ng-options="r.RegionID as r.RegionName for r in regions">
<option value="">-- Select Region --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Address:</label>
</td>
<td>
<input id="Address" name="Address" placeholder="Address" type="text" />
</td>
</tr>
<tr>
<td>
<label>Address 2:</label>
</td>
<td>
<input id="Address2" name="Address2" placeholder="Address 2" type="text" />
</td>
</tr>
<tr>
<td>
<label>City:</label>
</td>
<td>
<input id="city" name="city" placeholder="City" type="text" />
</td>
</tr>
<tr>
<td>
<label>Zip Code:</label>
</td>
<td>
<input id="zipcode" name="zipcode" placeholder="Zip Code" type="text" />
</td>
</tr>
</table>
</div>
<div ng-show="country==2">
<table>
<tr>
<td>
<label>Select Province: </label>
</td>
<td>
<select data-ng-model="state" data-ng-disabled="!states" data-ng-options="s.StateID as s.StateName for s in states" data-ng-change="GetRegion()">
<option value="">-- Select Province --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Select Region: </label>
</td>
<td>
<select data-ng-model="region" data-ng-disabled="!regions" data-ng-options="r.RegionID as r.RegionName for r in regions">
<option value="">-- Select Region --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Address:</label>
</td>
<td>
<input id="Address" name="Address" placeholder="Address" type="text" />
</td>
</tr>
<tr>
<td>
<label>Address 2:</label>
</td>
<td>
<input id="Address2" name="Address2" placeholder="Address 2" type="text" />
</td>
</tr>
<tr>
<td>
<label>City:</label>
</td>
<td>
<input id="city" name="city" placeholder="City" type="text" />
</td>
</tr>
<tr>
<td>
<label>Postal Code:</label>
</td>
<td>
<input id="postalcode" name="postalcode" placeholder="Postal Code" type="text" />
</td>
</tr>
</table>
</div>
</form>
</div>
</div>
</td>
<td>
<div>
<div>
<form name="mainForm" data-ng-submit="sendForm()" novalidate>
<div class="error">{{message}}</div>
<div>
<table>
<tr>
<td>
<label>Select Country: </label>
</td>
<td>
<select data-ng-model="country2" data-ng-options="c.CountryID as c.CountryName for c in countries" data-ng-change="GetShippingStates()">
<option value="">-- Select Country --</option>
</select>
</td>
</tr>
</table>
</div>
<div ng-show="country2==1">
<table>
<tr>
<td>
<label>Select State: </label>
</td>
<td>
<select data-ng-model="state2" data-ng-disabled="!states2" data-ng-options="s.StateID as s.StateName for s in states2" data-ng-change="GetShippingRegion()">
<option value="">-- Select State --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Select Region: </label>
</td>
<td>
<select data-ng-model="region2" data-ng-disabled="!regions2" data-ng-options="r.RegionID as r.RegionName for r in regions2">
<option value="">-- Select Region --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Address:</label>
</td>
<td>
<input id="Address" name="Address" placeholder="Address" type="text" />
</td>
</tr>
<tr>
<td>
<label>Address 2:</label>
</td>
<td>
<input id="Address2" name="Address2" placeholder="Address 2" type="text" />
</td>
</tr>
<tr>
<td>
<label>City:</label>
</td>
<td>
<input id="city" name="city" placeholder="City" type="text" />
</td>
</tr>
<tr>
<td>
<label>Zip Code:</label>
</td>
<td>
<input id="zipcode" name="zipcode" placeholder="Zip Code" type="text" />
</td>
</tr>
</table>
</div>
<div ng-show="country2==2">
<table>
<tr>
<td>
<label>Select Province: </label>
</td>
<td>
<select data-ng-model="state2" data-ng-disabled="!states2" data-ng-options="s.StateID as s.StateName for s in states2" data-ng-change="GetShippingRegion()">
<option value="">-- Select Province --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Select Region: </label>
</td>
<td>
<select data-ng-model="region2" data-ng-disabled="!regions2" data-ng-options="r.RegionID as r.RegionName for r in regions2">
<option value="">-- Select Region --</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Address:</label>
</td>
<td>
<input id="Address" name="Address" placeholder="Address" type="text" />
</td>
</tr>
<tr>
<td>
<label>Address 2:</label>
</td>
<td>
<input id="Address2" name="Address2" placeholder="Address 2" type="text" />
</td>
</tr>
<tr>
<td>
<label>City:</label>
</td>
<td>
<input id="city" name="city" placeholder="City" type="text" />
</td>
</tr>
<tr>
<td>
<label>Postal Code:</label>
</td>
<td>
<input id="postalcode" name="postalcode" placeholder="Postal Code" type="text" />
</td>
</tr>
</table>
</div>
</form>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
New html to re-use directive:
#{
Layout = null;
}
<h2>Index</h2>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/cascade.js"></script>
<body ng-app="dropDown" ng-controller="DropDownController">
<dropdowndirective>
</dropdowndirective>
#*<div class="DropDownDirective"></div>
<div ng-DropDownDirective></div>*#
</body>
It looks like you have a syntax error in your directive where dropDownController should be a string like this:
app.directive('DropDownDirective', function () {
return {
restrict: 'E',
templateUrl: 'AddressControl',
controller: 'DropDownController',
replace:true,
}
});
Not sure why you wouldn't get an error message for that though...
I'm trying to add dynamic rows as textbox to table using angularjs its adding but I'm not getting how to get the data from the text box and to store in array?
Code:
<div class="col-lg-12 form-group">
<div class="col-lg-12 fade-in tada" style="padding-top:10px">
<table ng-table="tableParams" class="display table table-striped table-bordered">
<tr ng-repeat="cap in data">
<td data-title="'Group'" sortable="group">
<input type="text" ng-model="group" />
</td>
<td data-title="'status'" sortable="Status">
<input type="text" ng-model="Status" />
</td>
<td data-title="'Type'" sortable="type">
<input type="text" ng-model="type" />
</td>
<td data-title="'Enable'" sortable="Enable">
<input type="text" ng-model="Enable" />
</td>
<td data-title="'Line Type'" sortable="LineType">
<input type="text" ng-model="LineType" />
</td>
<td data-title="'Description'" sortable="Dec">
<input type="text" ng-model="Dec" />
</td>
</tr>
</table>
</div>
<div class="col-lg-12">
<div class="pull-right" style="padding-right:10px">
<input type="submit" ng-click="bulk.submitFileset('process')" class="btn btn-default" value="Save" />
</div>
<div class="pull-right">
<input type="submit" ng-click="addFormField()" class="btn btn-default" value="Add" />
</div>
</div>
</div>
JS File:
(function() {
var app = angular.module('arcadminmodule', ['ngTable', 'ui-notification']);
app.controller('ArcAdminController', ['$http', '$scope', '$filter', 'ngTableParams', 'Notification', function($http, $scope, $filter, ngTableParams, Notification) {
$scope.data = [];
$scope.addFormField = function() {
$scope.data.push('')
$scope.tableParams.reload();
}
}]);
})();
I think you need to change the your html like below.
HTML
<tr ng-repeat="cap in data">
<td data-title="'Group'" sortable="group">
<input type="text" ng-model="cap.group" />
</td>
<td data-title="'status'" sortable="Status">
<input type="text" ng-model="cap.Status" />
</td>
<td data-title="'Type'" sortable="type">
<input type="text" ng-model="cap.type" />
</td>
<td data-title="'Enable'" sortable="Enable">
<input type="text" ng-model="cap.Enable" />
</td>
<td data-title="'Line Type'" sortable="LineType">
<input type="text" ng-model="cap.LineType" />
</td>
<td data-title="'Description'" sortable="Dec">
<input type="text" ng-model="cap.Dec" />
</td>
</tr>
Then you controller function would change like below
Code
$scope.addFormField = function() {
$scope.data.push({})
$scope.tableParams.reload();
};