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>
Related
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
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.
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
The input fields should NOT directly update the fields (meaning when I type in the input box you should NOT see the badge field update - only after the Submit button is pressed will the fields populate).
//index.html
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Name Badge</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-md-6">
<input class="text" placeholder="First Name" ng-model="fName"><br>
<input class="text" placeholder="Email" ng-model="email"><br>
<input class="text" placeholder="Phone" ng-model="phone">
</div>
<div class="col-md-6">
<input class="text" placeholder="Last Name" ng-model="lName"><br>
<input class="text" placeholder="Place of Birth" ng-model="birth"><br>
<input class="text" placeholder="Favorite Food" ng-model="food">
</div>
</div>
<textarea ng-model="about">Tell us about yourself</textarea><br>
<button class="btn" type="submit" ng-submit="info()">Submit</button>
<br><br>
<br><br><br><br>
<div class="row">
<div class="col-xs-6">
<h3>Name: {{fName}} {{lName}}</h3>
<h3>Place of Birth: {{birth}}</h3>
<h3>Email: {{email}}</h3>
</div>
<div class="col-xs-6">
<h3>Phone: {{phone}}</h3>
<h3>Favorite Food: {{food}}</h3>
</div>
</div>
<textarea>{{about}}</textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
Here is my app.js
var app = angular.module("MyApp", []);
app.controller("MainController", ['$scope', function ($scope) {
$scope.info = function () {
$scope.fName = fName;
$scope.email = '';
$scope.phone = '';
$scope.lName = '';
$scope.birth = '';
$scope.food = '';
$scope.about = '';
}
}])
Can someone look at my code and help me see what's wrong.
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Name Badge</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-md-6">
<input class="text" placeholder="First Name" ng-model="fName"><br>
<input class="text" placeholder="Email" ng-model="email"><br>
<input class="text" placeholder="Phone" ng-model="phone">
</div>
<div class="col-md-6">
<input class="text" placeholder="Last Name" ng-model="lName"><br>
<input class="text" placeholder="Place of Birth" ng-model="birth"><br>
<input class="text" placeholder="Favorite Food" ng-model="food">
</div>
</div>
<textarea ng-model="about">Tell us about yourself</textarea><br>
<button class="btn" type="submit" ng-submit="info()">Submit</button>
<br><br>
<br><br><br><br>
<div class="row">
<div class="col-xs-6">
<h3>Name: {{fName1}} {{lName1}}</h3>
<h3>Place of Birth: {{birth1}}</h3>
<h3>Email: {{email1}}</h3>
</div>
<div class="col-xs-6">
<h3>Phone: {{phone1}}</h3>
<h3>Favorite Food: {{food1}}</h3>
</div>
</div>
<textarea>{{about}}</textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
js file is
var app = angular.module("MyApp", []);
app.controller("MainController", ['$scope', function ($scope) {
$scope.info = function () {
$scope.fName1 = $scope.fName1;
$scope.email1 = $scope.email;
$scope.phone1 = $scope.phone;
$scope.lName1 = $scope.lName;
$scope.birth1 = $scope.birth;
$scope.food1 = $scope.food;
$scope.about1 = $scope.about;
}
}])
Firstly if have only one form on page, like:
<form class="form-horizontal" name="formCreateCtb">
...
Then i can easily access it in my controller in following way:
$scope.formCreateCtb.$setPristine(); // reset form validation
But as soon as i added second form on page, like:
<form class="form-horizontal" name="formCreateCtb">
...
<form class="form-horizontal" name="formCreateCtbs">
...
Then i can't access second form in scope like previosly:
$scope.formCreateCtb.$setPristine(); // still work OK
$scope.formCreateCtbs.$setPristine(); // Exception: formCreateCtbs is underfined
Why this behavior, and how to access form in scope, when i have multiple forms on page.
Thanks!
EDIT:
It seems the issue is that in project i have more complex markup, the second form
live in bootstrap tab, that is not visible at the moment of forms shown.
When i added second form out of modal, it works fine. The workaround is wrap entire tabs in one form element.
Use the ng-form directive
Online Demo - http://codepen.io/anon/pen/AXxVvY?editors=1010#0
html
<form name="formCreateCtb" novalidate>
<ng-form name="formCreateCtb">
<label>Email</label>
<input type="text" class="form-control" name="email" ng-model="email" required>
<p class="help-block" ng-show="formCreateCtb.email.$invalid">Valid Email Address Required</p>
</ng-form>
</form>
<form name="formCreateCtbs" novalidate>
<ng-form name="formCreateCtbs">
<label>Email 2</label>
<input type="text" class="form-control" name="email2" ng-model="email2" required>
<p class="help-block" ng-show="formCreateCtbs.email2.$invalid">Valid Email Address Required</p>
</ng-form>
</form>
<button ng-click="setPristine()">call setPristine</button>
js
.controller('mainController', function($scope) {
$scope.setPristine = function() {
$scope.formCreateCtb.$setPristine();
$scope.formCreateCtbs.$setPristine();
console.log('setPristine');
};
});
It is working for me.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
'use strict';
$scope.data = {
"name": ""
};
$scope.reset = function() {
$scope.data.name = "";
$scope.form.$setPristine();
}
$scope.reset1 = function() {
$scope.data.name1 = "";
$scope.form1.$setPristine();
}
});
input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
input.ng-valid.ng-dirty {
background-color: #78FA89;
}
<!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 src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script data-require="angular.js#1.0.x" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<form name="form" id="form" novalidate>
<input name="name" ng-model="data.name" placeholder="Name" required/>
<button class="button" ng-click="reset()">Reset</button>
</form>
<form name="form1" id="form1" novalidate>
<input name="name1" ng-model="data.name1" placeholder="Name1" required/>
<button class="button" ng-click="reset1()">Reset</button>
</form>
<p>Pristine: {{form.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre>
<p>Pristine: {{form1.$pristine}}</p>
<p> <pre>Errors: {{form1.$error | json}}</pre>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
'use strict';
$scope.data = {
"name": ""
};
$scope.reset = function() {
$scope.data.name = "";
$scope.form.$setPristine();
}
$scope.reset1 = function() {
$scope.data.name1 = "";
$scope.form1.$setPristine();
}
});
input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
input.ng-valid.ng-dirty {
background-color: #78FA89;
}
<!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 src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script data-require="angular.js#1.0.x" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<form name="form" id="form" novalidate>
<input name="name" ng-model="data.name" placeholder="Name" required/>
<button class="button" ng-click="reset()">Reset</button>
</form>
<form name="form1" id="form1" novalidate>
<input name="name1" ng-model="data.name1" placeholder="Name1" required/>
<button class="button" ng-click="reset1()">Reset</button>
</form>
<p>Pristine: {{form.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre>
<p>Pristine: {{form1.$pristine}}</p>
<p> <pre>Errors: {{form1.$error | json}}</pre>
</div>
</body>
</html>