I have created an index page where i have a text area control and a click button. On clicking the button i am redirecting to a new html file where i have included form with controls. I am trying to validate the controls but it seems there is an error. i checked the console log too but no errors logged there.
My working copy here:
PLUNKER DEMO
index file
<div style="width:1200px;visibility:hidden;margin-top:100px"></div>
<textarea class="textarea"> Text Area. Click button to create a dashboard. </textarea>
<input type="button" value="Click" ng-click="reDirecttoAddDashboard()" />
</div>
<br><br>
<div class="view-animate-container">
<div ng-view="" class="view-animate"></div>
</div>
<script src="script.js"></script>
</body>
JS code
var app = angular.module('app', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/AddDashBoard'
, {templateUrl: 'AddDashboard.html'
,controller:'AddDashBoardController'});
$routeProvider.otherwise({redirectTo: '/home'});
}])
app.controller('LandingPageInitController',
['$scope', '$log','$window', function($scope, $log,$window) {
"use strict";
$scope.reDirecttoAddDashboard = function()
{
console.log("function executed");
$window.location = "#/AddDashBoard";
console.log($window.location)
}
$log.info('Landing Page Controller Loaded.');
//$log.info($scope);
}]);
app.controller('AddDashBoardController', ['$scope', '$log', function($scope, $log) {
"use strict";
$scope.Test = function()
{
alert("Test function called");
}
$log.info('Add DashBoard Controller Loaded.');
//$log.info($scope);
}]);
AddDashboard.html
<body>
<div ng-controller="AddDashBoardController">
<table id="headerbanner" style="width:1120px;" class="tablestyle">
<tr>
<td style="text-align:right; font-size: 21px;width:990px;font-weight: bold;" ng-click="displaydetails()"> Add Dashboards </td>
</tr>
</table>
<table>
<tr>
<td colspan="2" style="text-align:right; font-size: 18px;width:990px;"> Save </td>
<td></td>
<td style="text-align:right; font-size: 18px;width:130px"> Cancel </td>
</tr>
</table>
<form name="myForm" novalidate>
<br><br><br>
<p>Title:
<input type="text" name="title" ng-model="title" required>
<span style="color:red" ng-show="myForm.title.$dirty && myForm.title.$invalid">
<span ng-show="myForm.title.$error.required">Title is required.</span>
</span>
</p>
<p>Description:
<input type="text" name="description" ng-model="description" required>
<span style="color:red" ng-show="myForm.description.$dirty && myForm.description.$invalid">
<span ng-show="myForm.description.$error.required">Title is required.</span>
</span>
</p>
</form>
</div>
Just removing myForm.title.$dirty from the ng-show will achieve what you want.
Plunker:
http://plnkr.co/edit/7in4itj7OkPQKpytK7os?p=preview
Related
Output image:
I tried comparing the original code with this but I'm unable to find any mistakes. I'm very confused why this is not working. When page is reloaded or reset button is clicked all fields has to be filled with details but its not happening. What might be the mistake?
<html>
<head>
<title>Angular practice</title>
</head>
<body>
<div ng-app="" ng-controller="studentController">
<form name="studentForm" novalidate>
<table>
<tr>
<td>first name</td>
<td><input name="firstname" type="text" ng-model="firstName" required>
<span style="color: red;" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
<span ng-show="studentForm.firstname.$error.required">enter first name</span>
</span>
</td>
</tr>
<tr>
<td>last name</td>
<td><input name="lastname" type="text" ng-model="lastName" required>
<span style="color: red;" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
<span ng-show="studentForm.lastname.$error.required">enter last name</span>
</span>
</td>
</tr>
<tr>
<td>email</td>
<td><input name="email" type="email" ng-model="email" required>
<span style="color: red;" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
<span ng-show="studentForm.email.$error.required">enter email ID</span>
<span ng-show="studentForm.email.$error.email">Invalid email</span>
</span>
</td>
</tr>
<tr>
<td><button ng-click="reset()">Reset</button></td>
<td><button ng- disabled="studentForm.firstname.$dirty &&
studentForm.firstname.$invalid ||
studentForm.lastname.$dirty && studentForm.lastname.$invalid||
studentForm.email.$dirty && studentForm.email.$invalid"
ng-click="submit()">Submit</button>
</td>
</tr>
</table>
</form>
</div>
<script>
function studentController($scope){
$scope.reset = function(){
$scope.firstName = "uthej";
$scope.lastName = "ks";
$scope.email = "uthej#gmail.com";
}
$scope.reset();
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>
ng-app is missing in your HTML code and you are not injecting controller in app.
HTML Code
<div ng-app="myApp" ng-controller="studentController">
Js code
var app = angular.module('myApp', []);
app.controller('studentController', function ($scope) {
$scope.reset = function () {
$scope.firstName = "uthej";
$scope.lastName = "ks";
$scope.email = "uthej#gmail.com";
}
$scope.reset();
});
you have misspelled HTML & Script, Correct one is..
Html::
<div ng-app="demoApp" ng-controller="studentController">
<form name="studentForm" novalidate>
// form fields will goes here....
</form>
</div>
& script::
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("demoApp", []);
app.controller("studentController", function($scope){
$scope.reset = function(){
$scope.firstName = "uthej";
$scope.lastName = "ks";
$scope.email = "uthej#gmail.com";
};$scope.reset();
});
</script>
I hope it will work for you.
I am new to AngularJS and need some help to solve an issue routing to another html page while passing a parameter. My application has a form with input fields (name & course). That information the user inputs will display in a table that is hidden unless it has data to display.
The issue is when clicking on the Display Info link, I am not being routed to the DisplayInfo.html page.
Here is the code: http://plnkr.co/edit/6WpZYkKMy0B4Vl8Phtnw?p=preview
app.js file
var app = angular.module('student', []);
app.controller('StudentController', function($scope) {
$scope.studentList = [];
$scope.addStudent = function() {
this.studentList.push({
name: $scope.getName,
course: $scope.getCourse,
date: new Date()
});
$scope.getName = "";
$scope.getCourse = "";
};
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/DisplayInfo/:name', {
templateUrl: 'DisplayInfo.html',
controller: 'DisplayInfoController'
});
}
]);
app.controller('DisplayInfoController', function($scope, $routeParams) {
$scope.name = $routeParams.getName;
});
});
Index.html
<!DOCTYPE html>
<html ng-app="student">
<head>
<link rel="stylesheet" type="text/css" href="student.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="header">
<h1>Student Access</h1>
<p>
<fieldset>
<br />
<br />
<form ng-controller="StudentController as studentCtrl" ng-submit="addStudent()">
<div ng-if="studentList.length > 0">
<table class="table table-striped">
<tr>
<th>
Name
</th>
<th>
Course
</th>
<th>
Date
</th>
</tr>
<tr ng-repeat="getStudent in studentList track by $index">
<td ng-bind="getStudent.name">
</td>
<td ng-bind="getStudent.course">
</td>
<td ng-bind="getStudent.date | date:'MM-dd-yyyy'">
</td>
<td>Display Info</td>
</tr>
</table>
</div>
<div ng-view></div>
<br />
<fieldset class="form-group">
<legend><strong>First Name</strong></legend>
<input ng-model="getName" type="text" class="form-control" title="Name" placeholder="Enter Student Name" />
</fieldset>
<fieldset class="form-group">
<legend><strong>Course</strong></legend>
<input ng-model="getCourse" type="text" class="form-control" title="Course" placeholder="Enter Course" />
</fieldset>
<input type="submit" class="btn btn-primary pull-right" value="Add Info" />
</form>
</fieldset>
</div>
</div>
<!-- AngularJS Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> </script>
<script src="app.js"></script>
</body>
DisplayInfo.html
Name: {{getStudent.name}}
Here are the details for todo item: #{{getStudent}.
I think a / is missing in :
<td>Display Info</td>
It should be :
<td>Display Info</td>
i have one textbox and few buttons and i want when user will click on any button then textbox will have focus. i tried this way but did not work angular.element("#txtData").focus();
my full code
<div ng-app="myApp" ng-controller="myCtrl">
<table border=2>
<tr>
<td colspan=5><input type=text ng-model="Operantion" id="txtData" style="width:97%" ng-change="GetData(Operantion,'onChange')"></td>
</tr>
<tr>
<td><input type=button value="+" ng-click="GetData('+','btnClick')"></td>
<td><input type=button value="-" ng-click="GetData('-','btnClick')"></td>
<td><input type=button value="x" ng-click="GetData('*','btnClick')"></td>
<td><input type=button value="/" ng-click="GetData('/','btnClick')"></td>
<td><input type=button value="=" ng-click="GetData('=','btnClick')"></td>
</tr>
</table>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.GetData = function (arg1, evtType) {
if (evtType === 'btnClick') {
angular.element("#txtData").focus();
}
};
});
js fiddle https://jsfiddle.net/tridip/wzvq5ov8/
i found few same kind of post in this forum and saw people write many code to achieve this by custom directives. i am so new and that is why i do not understand their code. one similar post url here which i checked https://stackoverflow.com/a/15529412/728750
this code angular.element("#txtData").focus(); suppose to work in angular but did not.......do i need to refer any library called jqLite ?
i heard jqLite is inbuilt in angular js...is it true. can anyone tell me why the this code did not function angular.element("#txtData").focus(); from controller function ?
i find out how to place focus with angular directives. here is code
jsfiddle https://jsfiddle.net/tridip/muz887hu/1/
<div class="main" ng-app="myApp">
<p>Name: <input type="text" ng-model="name" id="question1"></p>
<button id='btn' set-focus='question1'>click</button>
</div>
var myApp = angular.module('myApp',[]);
myApp.directive('setFocus',function(){
return {
link: function(scope, element, attrs){
element.bind('click',function(){
//alert(element.attr('id'));
document.querySelector('#' + attrs.setFocus).focus();
})
}
}
})
First of all, you have an eloquent error in your JS console that can lead you on the right way :
VM363 angular.js:12520 Error: [jqLite:nosel] Looking up elements via
selectors is not supported by jqLite! See:
http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.4.8/jqLite/nosel
So, don't use jqLite or jQuery, and use .focus() on the element itself, as simple as possible :
document.querySelector("#txtData").focus();
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.GetData = function(arg1, evtType) {
if (evtType === 'btnClick') {
document.querySelector("#txtData").focus();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table border=2>
<tr>
<td colspan=5>
<input type=text ng-model="Operantion" id="txtData" style="width:97%" ng-change="GetData(Operantion,'onChange')">
</td>
</tr>
<tr>
<td>
<input type=button value="+" ng-click="GetData('+','btnClick')">
</td>
<td>
<input type=button value="-" ng-click="GetData('-','btnClick')">
</td>
<td>
<input type=button value="x" ng-click="GetData('*','btnClick')">
</td>
<td>
<input type=button value="/" ng-click="GetData('/','btnClick')">
</td>
<td>
<input type=button value="=" ng-click="GetData('=','btnClick')">
</td>
</tr>
</table>
</div>
My question is
when I click the edit link in the table model-dialog want to open and its
value should be assigned in there field. Here dialog will opening but the
value will not getting initialized.
<div ng-app="myapp" ng-controller="myctrl">
<form method="POST" action="Projects" >
<div class="modal fade" id="update" role="dialog" >
<div class="modal-dialog">
<label for="Project_Id"> Project Id</label>
<input readonly="readonly" ng-model=project_id class="form-control"
id="project_id" value="" />
</div>
</div>
</form>
MY question is
when I click the edit link in the table model-dialog want to open and its
value should be assigned in there field. Here dialog will opening but the
value will not getting initialized.
<table>
<thead><tr><td> Edit </td></tr></thead>
<tbody>
<tr ng-repeat="values in records ">
<td>
<a data-toggle="modal" ng-model=values.projectId
ng-href="#update"</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope, $http) {
$http.get('Projects').success(function (data) {
$scope.records = data;
$scope.project_id=$scope.data.projectId;
// $scope.project_id="some value" ...if i remove this comment it is working properly some value will be shown, but I need particular record data.projectId should be displayed
});
</script>
Try the following:
Put an ng-click on your tag like so:
<a data-toggle="modal" ng-model= values.projectId ng-click="viewRecord(values.projectid)"></a>
In your Angular Controller:
$scope.selected = {
records:[]
};
$scope.viewRecord = function(recordId){
$scope.selected.records.push(record)
}
Then on your modal:
<div ng-repeat="r in selected.records">
<div><input type="text" value="r.projectId"></div>
</div>
<table>
<thead><tr><td> Edit </td></tr></thead>
<tbody>
<tr ng-repeat="record_values in records ">
<td>
<a data-toggle="modal" ng-click='disp(record_values)'
ng-href="#update"</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope, $http) {
$http.get('Projects').success(function (data) {
$scope.records = data;
$scope.disp=function( record)
{
$scope.project_description=record.projectId;
};
});
</script>
I have a list of brands:
<script type="text/ng-template" id="list.brands">
<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl">
<input type="text" ng-model="searchBox">
<thead>
<tr>
<th><tags:label text="brandid"/></th>
<th><tags:label text="name"/></th>
<th><tags:label text="isactive"/></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="actionresult{{$index + 1}}" ng-repeat="brand in brands | filter:searchBox">
<td>{{brand.brandid}}</td>
<td>{{brand.name}}</td>
<td>{{brand.isactive}}</td>
<td>
<a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open(brand.brandid)"><tags:label text="edit"/></a>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{brand.brandid}}" data-toggle="modal" ><tags:label text="delete"/></a>
</td>
</tr>
</tbody>
</table>
</script>
This list has brands line with 2 button; edit and delete. Edit button opens a modal of brand edit form:
<%#page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" ng-model="item.brandid" name="brandid"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" ng-model="item.name" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-model="item.isactive" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
In modal, save button saves modifications and closes the modal.
I want to reload the list after closing. How can I do it ? Controllers of list and modal is different.
How can I reload background of modal after close it ?
You can broadcast a method to communicate
try like this
In modal controller where close button is triggered
$rootScope.$broadcast('updateList');
If you wanna to pass data from modal
$rootScope.$broadcast('updateList',{data : 'passing'}); // pass object in {} if you wanna to pass anything
In data Controller
$scope.$on("updateList",function(){
// Post your code
});
If you passed data from modal
$scope.$on("updateList",function(e,a){
// Post your code
console.log(a.data);
});
If you are using angular UI $modal Service, then its pretty simple. The open() method of $modal service returns a promise on close and cancel of the modal.
Lets say
var myModal = $modal.open({
animation: true,
templateUrl: 'editForm.html',
backdrop: 'static',
keyboard: false,
scope: $scope
});
myModal.result.then(function(){
//Call function to reload the list
});
As you are calling $modal.open from list controller itself, you have got access to `promise' in list controller only and from there you can easily call your function to reload the list.