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
Related
I am trying to make a form which displays after clicking the button "Click to enter Observations". The same form should appear when the "Next Observation" Button is clicked. This should happen in a loop until I click the "Finish" Button.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form>
Vendor Name: <input type="text"> <br> <br>
Vendor Details: <textarea> </textarea> <br> <br>
<button ng-click="myFunc()">Click to enter Observations</button>
</form>
<div ng-show="showMe">
<br> <br> <form>
Detailed Observation <input type="text">
<button type="submit" ng-click="myFunc()"> Next Observation </button>
<button type="submit"> Finish </button>
</form>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe = false;
$scope.myFunc = function() {
$scope.showMe = true;
}
});
</script>
</body>
</html>
If I understand you correctly, you don't need to change the UI (e.g. render the form again or something) but reset the form after every "next" click.
If so, my suggestion is to hold an array of observations. Clicking on "next" will push the input's value into this array and clear the input. Clicking on finish will do something (log currently) with the array.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form>
Vendor Name: <input type="text"> <br> <br>
Vendor Details: <textarea> </textarea> <br> <br>
<button ng-click="myFunc()">Click to enter Observations</button>
</form>
<div ng-show="showMe">
<br> <br> <form>
Detailed Observation <input type="text" ng-model="observation">
<button type="submit" ng-click="nextObservation()"> Next Observation </button>
<button type="submit" ng-click="finish()"> Finish </button>
</form>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.observations = [];
$scope.showMe = false;
$scope.myFunc = function() {
$scope.showMe = true;
}
$scope.nextObservation = function() {
if ($scope.observation) {
$scope.observations.push($scope.observation);
$scope.observation = '';
}
}
$scope.finish = function() {
$scope.nextObservation();
console.log($scope.observations);
}
});
</script>
</body>
</html>
Update
In order to keep the previous values but add a new one on click on "next", you can use that array with ng-repeat to render the ui based on that array. Notice that you need track by $index this time to avoid entities duplications (For more info: https://stackoverflow.com/a/26518721/863110)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form>
Vendor Name: <input type="text"> <br> <br> Vendor Details: <textarea> </textarea> <br> <br>
<button ng-click="myFunc()">Click to enter Observations</button>
</form>
<div ng-repeat="observation in observations track by $index">
<br> <br>
<form>
Detailed Observation <input type="text" ng-model="observations[$index]">
<button type="submit" ng-click="nextObservation($index)" ng-if="$last"> Next Observation </button>
<button type="submit" ng-click="finish()" ng-if="$last"> Finish </button>
</form>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.observations = [];
$scope.myFunc = function() {
$scope.observations.push('');
}
$scope.nextObservation = function($index) {
$scope.observations[$index]
if ($scope.observations[$index]) {
$scope.observations.push('');
}
}
$scope.finish = function() {
console.log($scope.observations);
}
});
</script>
</body>
</html>
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 am working on dynamic forms with ng-repeat. I am using the oi-select library for loading my locations. The oi-select box has multi select feature. on my page loading by default, I am loading first option value in that oi-select box.
But I am using a multi select feature if I select any other option than the first option it gets override with that value. Due to this issue, I have to select again that first option. My question is, how can I load my first option value by default into that oi-select?
Afterwards, if I am select any other options it won't override my first value in select box .Here is my plunker link http://plnkr.co/edit/m6Q02dlHLBCMVLRLfioh?p=preview
my HTML code
<body class="container row">
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="user in users">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
</div>
<div class="col-md-3 ">
<label>Location</label>
<oi-select ng-model="user.location" multiple oi-options="v for v in locations" ng-init='initLocation(user)' name="select2" required>
</oi-select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</div>
</div>
my js code
var app = angular.module('myApp', ['ngResource', 'oi.select']);
app.controller('myCtrl', function($scope, $timeout) {
$scope.ids = [1, 2, 3];
$scope.users = $scope.ids.map(function(id) {
return {
id: id,
comment: "",
location: ""
};
});
$scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
$scope.initLocation = (user) => {
$timeout(() => {
user.location = $scope.locations[0];
});
}
$scope.adduser = function() {
var data = $scope.users.map(function(user) {
return {
"userid": user.id,
"manualcomment": user.comment,
"location": user.location
}
});
console.log("data", data)
}
});
If you use multiple attribute, this means the model should be an array and not a string as in your case user.location = $scope.locations[0];, ypu have to change it to location: [] and use push() method to add the initial items to this array;
Using $timeout doesn't make any sense to me;
ngInit adds unnecessary amount of logic into the template, I would prefer avoid using it in you case, just use location: [$scope.locations[0]] in your controller.
Working example:
var app = angular.module('myApp', ['ngResource', 'oi.select']);
app.controller('myCtrl', function($scope, $timeout) {
$scope.ids = [1, 2];
$scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
$scope.users = $scope.ids.map(function(id) {
return {
id: id,
comment: "",
location: []
};
});
$scope.initLocation = (user, locations) => {
if (!user.location.length) {
user.location.push(locations[0]);
}
}
$scope.adduser = function() {
$scope.users.push({
id: Math.max(...($scope.users.map(u => { return u.id; }))) + 1,
comment: "added from controller",
location: [$scope.locations[2]]
});
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//rawgit.com/tamtakoe/oi.select/master/dist/select.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script data-require="angular-resource#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"></script>
<script src="//rawgit.com/tamtakoe/oi.select/master/dist/select-tpls.js"></script>
<script src="script.js"></script>
</head>
<body class="container row">
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="user in users">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
</div>
<div class="col-md-3 ">
<label>Location</label>
<oi-select ng-model="user.location"
multiple oi-options="v for v in locations" ng-init='initLocation(user, locations)'
name="select2" required>
</oi-select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</div>
</body>
</html>
I'm new to Angular and Ionic and I have problem with getting value of input. I get "undefined". Here is my code:
.controller('myCtrl', function($scope) {
$scope.submit = function () {
console.log($scope.name);
}
}
<form ng-submit="submit()">
<input type="text" ng-model="name">
<button class="button">Send</button>
</form>
try this
<form>
<input type="text" ng-model="name">
<button ng-click="submit()" class="button">Send</button>
</form>
Try this code
<form ng-submit="submit()">
<input type="text" ng-model="FinalData.name" name="name">
<button class="button">Send</button>
</form>
And then in controller
$scope.FinalData={};
$scope.FinalData.name ="dasda";
$scope.submit = function(){
console.log($scope.FinalData.name);
}
Check with this example
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.name = 'Hello World!';
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller='myCtrl'>
<form ng-submit="submit()">
<input type="text" ng-model="name">
<button class="button">Send</button>
</form>
</div>
</body>
</html>
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>