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.
Related
I have following code which add dynamically textbox. The form contains Name and Programing skill textbox. The Programing skill textbox can be added dynamically.
I am trying to validate dynamic textbox. As of now it generates textbox every time when I click on "ADD" Button. If I entered anything in textbox then only it should be allowed to generate next textbox , else it should show a message/alert to fill the textbox.
I use ng-repeat to generate textbox.
<!DOCTYPE html>
<html>
<head>
<title>validation</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
<div ng-app="dynamicApp" ng-controller="dynamicController" class="container" style="width:600px;" ng-init="fetchData()">
<div class="alert alert-success alert-dismissible" ng-show="success" >
×
{{successMessage}}
</div>
<div class="alert alert-danger alert-dismissible" ng-show="error" >
×
{{errorMessage}}
</div>
<form method="post" ng-submit="submitForm()">
<div class="form-group">
<label>Enter Your Name</label>
<input type="text" name="name" id="name" ng-model="formData.person_name" class="form-control" />
</div>
<fieldset ng-repeat="row in rows">
<div class="form-group">
<label>Enter Your Programming Skill</label>
<div class="row">
<div class="col-md-9">
<input type="text" name="programming_languages[]" class="form-control" ng-model="formData.skill[$index + 1]" />
</div>
<div class="col-md-3">
<button type="button" name="remove" ng-model="row.remove" class="btn btn-danger btn-sm" ng-click="removeRow()"><span class="glyphicon glyphicon-minus"></span></button>
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<button type="button" name="add_more" class="btn btn-success" ng-click="addRow()"><span class="glyphicon glyphicon-plus"></span> Add</button>
<input type="submit" name="submit" class="btn btn-info" value="Save" />
</div>
</form>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<tr>
<th>Name</th>
<th>Programming Languages</th>
</tr>
<tr ng-repeat="name in namesData">
<td>{{name.name}}</td>
<td>{{name.programming_languages}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
var app = angular.module('dynamicApp', []);
app.controller('dynamicController', function($scope, $http){
$scope.success = false;
$scope.error = false;
$scope.fetchData = function(){
$http.get('/home/testdata').success(function(data){
$scope.namesData = data;
});
};
$scope.rows = [{name: 'programming_languages[]', name: 'remove'}];
$scope.addRow = function(){
var id = $scope.rows.length + 1;
$scope.rows.push({'id':'dynamic'+id});
};
$scope.removeRow = function(row){
var index = $scope.rows.indexOf(row);
$scope.rows.splice(index, 1);
};
$scope.formData = {};
$scope.submitForm = function(){
$http({
method:"POST",
url:"/home/test",
data:$scope.formData
}).success(function(data){
if(data.error != '')
{
$scope.success = false;
$scope.error = true;
$scope.errorMessage = data.error;
}
else
{
$scope.success = true;
$scope.error = false;
$scope.successMessage = data.message;
$scope.formData = {};
$scope.rows = [{name: 'programming_languages[]', name: 'remove'}];
$scope.fetchData();
}
});
};
});
</script>
I am creating a to-do list in angular js. I am trying to access the form in the controller. However, when I click the add new button, it doesn't add to the list.
There is also no error displaying which shows to me that the function probably isn't doing anything.
How do I get the add new button to add to the list.
Here is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<h1>To do List</h1>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="app.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp" ng-controller="todoCtrl as vm">
<form name="vm.myform" ng-submit="toDoAdd()">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" ng-click="vm.toDoAdd " value="Add New">
<br>
<div ng-repeat="x in todoList">
<input type="checkbox" ng-model="x.done"><span ng-bind="x.todoText">
</span>
</div>
<p>
<button ng-click="remove()">Remove marked</button></p>
</form>
</body>
</html>
Here is app.js:
var app = angular.module('myApp', []);
app.controller('todoCtrl',['$scope' ,function ($scope) {
$scope.toDoList = [{todoText: "check", done: false}];
function todoAdd() {
var vm=this;
vm.toDoAdd=toDoAdd;
$scope.toDoAdd = function () {
$scope.toDoList.push({todoText: $scope.todoInput, done: false});
$scope.todoInput = "";
}
}
}])
I have made some changes to your application:
<body ng-app="myApp" ng-controller="todoCtrl">
<form ng-submit="toDoAdd()">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
<br>
<div ng-repeat="x in toDoList">
<input type="checkbox" ng-model="x.done" /><span ng-bind="x.todoText">
</span>
</div>
<p>
<button type="button" ng-click="remove()">Remove marked</button></p>
</form>
</body>
var app = angular.module('myApp', []);
app.controller('todoCtrl',['$scope' ,function ($scope) {
$scope.toDoList = [{todoText: "check", done: false}];
$scope.toDoAdd = function () {
$scope.toDoList.push({todoText: $scope.todoInput, done: false});
$scope.todoInput = "";
}
}])
There are two ways of using controllers, one with $scope and other with controller as vm in this case for simplicity I am using $scope you can read more about the other notation in this guide
It aims that I can input some data and will update in {{urname}} and {{urcm}} inside the table. However, the expression is not work.
Also, I cannot open up new row in the table when I submit new comments. All the data packed together.
var myApp = angular.module('myApp', []);
myApp.controller('TableFilterCtrl', ['$scope', function($scope) {
$scope.urname = [];
$scope.urcm = [];
$scope.uname = '';
$scope.ucm = '';
$scope.submit = function() {
if (!!$scope.uname, !!$scope.ucm) {
$scope.urname.push($scope.uname);
$scope.urcm.push($scope.ucm);
}
$scope.uname = '';
$scope.ucm = '';
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="js/control.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/hp.css">
</head>
<body>
<form ng-submit="submit()" ng-controller="TableFilterCtrl">
<label>Name: </label>
<input type="text" ng-model="uname" name="uname" placeholder="Enter your name." />
<label>Comments on mv: </label>
<input type="text" ng-model="ucm" name="ucm">
<input type="submit" id="submit" value="submit" />
<div>
<table>
<tr>
<td>Name</td>
<td>Comments</td>
</tr>
<tr>
<td>{{urname}}</td>
<td>{{urcm}}</td>
</tr>
</table>
</div>
</form>
</body>
Just changing the logic a little bit and using ng-repeat, I suggest something like this:
var myApp = angular.module('myApp', []);
myApp.controller('TableFilterCtrl', ['$scope', function($scope) {
$scope.ur = [];
$scope.uname = '';
$scope.ucm = '';
$scope.submit = function() {
if (!!$scope.uname, !!$scope.ucm) {
$scope.ur.push({
name: $scope.uname,
cm: $scope.ucm
});
}
$scope.uname = '';
$scope.ucm = '';
}
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
</head>
<body>
<form ng-submit="submit()" ng-controller="TableFilterCtrl">
<label>Name: </label>
<input type="text" ng-model="uname" name="uname" placeholder="Enter your name." />
<label>Comments on mv: </label>
<input type="text" ng-model="ucm" name="ucm">
<input type="submit" id="submit" value="submit" />
<div>
<table>
<tr>
<td>Name</td>
<td>Comments</td>
</tr>
<tr ng-repeat="u in ur">
<td>{{u.name}}</td>
<td>{{u.cm}}</td>
</tr>
</table>
</div>
</form>
</body>
I have ASP.NET MVC application and I am trying simple example where submit form is handle by ng-submit and alert value of input using angularJS. my first part of angularJS (display record in table ng-repeat) is working but not form, not sure what I am missing here!
https://jsfiddle.net/toxic_kz/srs69ppp/2/
HTML
<div>{{ "Two plus Two equals: " + (2+2) }}</div>
<div ng-controller="tripsControllers as vm" class="col-md-6 col-md-offset-3" style="width:100%">
<table class="table table-responsive table-striped">
<tr ng-repeat="trip in vm.trips">
<td>{{ trip.name }}</td>
<td>{{ trip.created | date: 'dd-MM-yyyy'}}</td>
<td>Manage</td>
</tr>
</table>
<form novalidate name="NewTripForm" ng-submit="vm.addTrip()">
<div class="form-group">
<label for="name">New Trip Name</label>
<input class="form-control" type="text" id="name" name="name" ng-model="vm.newTrip.name" />
</div>
<div class="form-group">
<label>Testing Button</label>
<input class="btn btn-success" type="button" value="testing" id="testA" ng-click="alert('testing A Button')" />
</div>
<div class="form-group">
<input class="btn btn-success btn-sm" type="submit" value="Add" />
</div>
</form>
</div>
AngularJS
(function () {
"use strict";
angular.module("app-trips", []);
})();
(function () {
"use strict";
angular.module("app-trips")
.controller("tripsControllers", tripsController);
function tripsController()
{
var vm = this;
vm.trips = [{
name: "US trip",
created: new Date()
},
{
name: "World trip",
created: new Date()
}
];
vm.newTrip = {};
vm.addTrip() = function () {
alert(vm.newTrip.name);
};
}
})();
I have added your code in a plunker to make it work.
app.js:
var app = angular.module('plunker', []);
app.controller('tripsControllers', function($scope) {
var vm = this;
vm.trips = [{
name: "US trip",
created: new Date()
},
{
name: "World trip",
created: new Date()
}
];
vm.newTrip = {};
vm.addTrip = function () {
alert(vm.newTrip.name);
};
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body>
<div>{{ "Two plus Two equals: " + (2+2) }}</div>
<div ng-controller="tripsControllers as vm" class="col-md-6 col-md-offset-3" style="width:100%">
<table class="table table-responsive table-striped">
<tr ng-repeat="trip in vm.trips">
<td>{{ trip.name }}</td>
<td>{{ trip.created | date: 'dd-MM-yyyy'}}</td>
<td>Manage</td>
</tr>
</table>
<form novalidate name="NewTripForm" ng-submit="vm.addTrip()">
<div class="form-group">
<label for="name">New Trip Name</label>
<input class="form-control" type="text" id="name" name="name" ng-model="vm.newTrip.name" />
</div>
<div class="form-group">
<label>Testing Button</label>
<input class="btn btn-success" type="button" value="testing" id="testA" ng-click="alert('testing A Button')" />
</div>
<div class="form-group">
<input class="btn btn-success btn-sm" type="submit" value="Add" />
</div>
</form>
</div>
</body>
</html>
https://plnkr.co/edit/7X73A8GidqIzF91fmlkK
<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>