I want to hide/show a div based on checkbox. Seems pretty simple. I store the value of checkbox in a model and use it in div ng-show. What am I doing wrong?
<div ng-app='visibleApp'>
<div ng-controller='myController'>
<input type="checkbox" name="hideBasicInfo" ng-model="hideBasicInfo">hide the basic information section
<div ng-show="{{!hideBasicInfo}}">
<label for="firstName">First Name:</label>
<input type="text" name="firstName" ng-model="firstName"/></br>
<label for="middleName">Middle Name:</label>
<input type="text" name="middleName" ng-model="middleName"/></br>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" ng-model="lastName"/>
</div>
<hr/>
<div>
<h4>Debug Information</h4>
hideBasicInfo: {{hideBasicInfo}}<br/>
!hideBasicInfo: {{!hideBasicInfo}}
</div>
</div>
</div>
JS file:
var visibleApp = angular.module('visibleApp',[]);
visibleApp.controller('myController', function($scope){
$scope.data = "my data";
$scope.hideBasicInfo = false;
});
Thank you.
See fiddle
almost there...
<div ng-hide="hideBasicInfo">
...
</div>
no template braces ( {{}} ) needed.
<div ng-show='One'>
<p>Section One</p>
</div>
<div ng-show='Two'>
<p>Section Two</p>
</div>
<div ng-show='Three'>
<p>Section Three</p>
</div>
<!-- Navigation -->
<nav>
<a href='#' ng-click='showOne'> Show Div One </a>
<a href='#' ng-click='showTwo'> Show Div Two </a>
<a href='#' ng-click='showThree'> Show Div Three </a>
</nav>
Execute this code:`enter code here`
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body ng-app>
<h3>1. Show</h3>
<label>Show the square: <input type="checkbox" ng-model="mustShow" /></label><br />
<div ng-show="mustShow" style="width: 50px; height: 50px; background-color: red;"></div><br />
<br />
<h3>2. Hide</h3>
<label>Hide the square: <input type="checkbox" ng-model="mustHide" /></label><br />
<div ng-hide="mustHide" style="width: 50px; height: 50px; background-color: green;"></div>
</body>
</html>
Related
Here is the list of users. I need to display particular user details when clicked on him.
<head>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.userData = undefined;
$http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
$scope.userData = response.data;
});
}]);
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<h1> PERSONS</h1>
<form name="commonForm">
<div class="col-sm-4" ng-repeat="user in userData.results" ng-class="{active : isSelected(user)} style="margin-top:50px;">
<img class="col-sm-4" ng-src="{{user.picture.large}}"/>
<div class="col-sm-8">
<div ><a ng-click="clickMe(p)" class="clickable"><b>{{user.name.first}} {{user.name.last}}</b></a></div>
<div>{{user.email}}</div>
<div>{{user.location.street}},{{user.location.city}},{{user.location.state}},{{user.location.postcode}}</div>
</div>
</div>
</form>
</div>
</body>
Also check the following link for the demo - https://plnkr.co/edit/J70FKDpdXUtg1AfiVkcz?p=preview
I need to display a particular user's data when we click on the user.
Below is the working example for the same
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.userData = undefined;
$scope.selectedUser = undefined;
$http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
$scope.userData = response.data;
});
$scope.selectUser = function(usr){
$scope.selectedUser=usr;
};
}]);
}());
</script>
<style>
.userInfo{
border: 1px solid #ccc;
margin-top:10px;
padding:5px;
cursor: pointer;
}
.userInfo:hover{
background: #ccc;
}
.profile{
padding-left: 0px;
padding-right: 0px;
}
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<form name="commonForm">
<div ng-hide="selectedUser">
<div class="col-sm-4 userInfo" ng-repeat="user in userData.results" ng-click="selectUser(user)" >
<img class="col-sm-4 profile" ng-src="{{user.picture.medium}}"/>
<div class="col-sm-8">
<div class="ellipsis"><b>{{user.name.first}} {{user.name.last}}</b></div>
<div class="ellipsis">{{user.email}}</div>
</div>
</div>
</div>
<div ng-show="selectedUser">
<button ng-click="selectedUser = undefined">Go Back</button>
<br />
<br />
<img class="col-sm-4 profile" ng-src="{{selectedUser.picture.large}}"/>
<div class="col-sm-4">
<div class="form-group">
<label for="first">First Name:</label>
<input type="text" class="form-control" id="first" ng-model="selectedUser.name.first">
</div>
<div class="form-group">
<label for="last">Last Name:</label>
<input type="text" class="form-control" id="last" ng-model="selectedUser.name.last">
</div>
<div class="form-group">
<label for="username">Login:</label>
<input type="text" class="form-control" id="username" ng-model="selectedUser.login.username" disabled>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" ng-model="selectedUser.email">
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="text" class="form-control" id="dob" ng-model="selectedUser.dob">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="nat">Nationality:</label>
<input type="text" class="form-control" id="nat" ng-model="selectedUser.nat">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I am writing a HTML page using Bootstrap and AngularJS to capture details of an order, and when the page has finished loading it jumps up so that the header of the panel is hidden under the bootstrap navbar.
This isn't what I was expecting. See this plunkr for an example of what I want to achieve. It shows the panel header and the focus is on the Order Ref field as expected and the page doesn't move up at all.
I have tried to create a plunkr that uses AngularJS to demonstrate the issue, but I couldn't get it to run properly so I decided to show the same plunked code in the hope that someone has come across this before.
<!-- Orders.html -->
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="site.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>Portal</title>
</head>
<body>
<header class="bs">
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="#">Portal</a>
</div>
<div class="collapse navbar-collapse">
<div class="nav navbar-nav navbar-right">
<div class="navbar-text">Search</div>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
</header>
<div class="container">
<form name="form" class="form-horizontal" confirm-on-exit>
<div class="panel panel-primary">
<div class="panel-heading">
Create New Order
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputOrderRef3" class="col-sm-2 control-label">Order Ref</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderRef3" placeholder="Order Ref" ng-model="order.orderRef" maxlength="6" required autofocus>
</div>
</div>
<div class="form-group">
<label for="inputOrderDate3" class="col-sm-2 control-label">Order Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputOrderDate3" ng-model="order.orderDate" required>
</div>
</div>
<div class="form-group">
<label for="inputCustomer3" class="col-sm-2 control-label">Customer</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputCustomer3" placeholder="Customer" ng-model="order.customerName" maxlength="50" required>
</div>
</div>
<div class="form-group">
<label for="inputOrderedBy3" class="col-sm-2 control-label">Ordered By</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderedBy3" placeholder="Ordered By" ng-model="order.orderedBy" maxlength="3" required>
</div>
</div>
<div class="form-group">
<label for="inputInstallationDate3" class="col-sm-2 control-label">Installation Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputInstallationDate3" ng-model="order.installationDate" required>
</div>
</div>
<div class="form-group">
<label for="inputAddress3" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<textarea id="inputAddress3" class="form-control" rows="4" ng-model="order.address" maxlength="250" required></textarea>
</div>
</div>
<div class="form-group">
<label for="inputTown3" class="col-sm-2 control-label">Town</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputTown3" placeholder="Town" ng-model="order.town" maxlength="30" required>
</div>
</div>
<div class="form-group">
<label for="inputPostcode3" class="col-sm-2 control-label">Postcode</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPostcode3" placeholder="Postcode" ng-model="order.postcode" maxlength="15" required>
</div>
</div>
<div class="form-group">
<label for="inputOrderNumber3" class="col-sm-2 control-label">Order Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderNumber3" placeholder="Order Number" ng-model="order.orderNumber" required>
</div>
</div>
<div class="form-group">
<label for="inputValue3" class="col-sm-2 control-label">Value</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputValue3" ng-model="order.value" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-click="saveOrder()">Save Order</button>
<button type="button" class="btn btn-default" ng-click="cancelOrder()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
<div class="container">
<p class="text-muted">© 2015 Copyrights</p>
<p class="text-muted small">Built using Twitter Bootstrap v3.3.2</p>
</div>
</nav>
</body>
</html>
/* site.css */
body {
padding-top: 70px;
padding-bottom: 50px;
}
.huge {
font-size: 40px;
}
.panel-green {
border-color: #5cb85c;
}
.panel-green .panel-heading {
border-color: #5cb85c;
color: white;
background-color: #5cb85c;
}
.panel-green a {
color: #5cb85c;
}
.panel-green a:hover {
color: #3d8b3d;
}
.panel-red {
border-color: #d9534f;
}
.panel-red .panel-heading {
border-color: #d9534f;
color: white;
background-color: #d9534f;
}
.panel-red a {
color: #d9534f;
}
.panel-red a:hover {
color: #b52b27;
}
.panel-yellow {
border-color: #f0ad4e;
}
.panel-yellow .panel-heading {
border-color: #f0ad4e;
color: white;
background-color: #f0ad4e;
}
.panel-yellow a {
color: #f0ad4e;
}
.panel-yellow a:hover {
color: #df8a13;
}
It's quite annoying when the page moves up and creates a poor user experience. As this issue doesn't occur when not using Angular I'm inclined to believe that Angular could be the problem, although I cannot see how.
EDIT
I've updated the plunkr so that it now uses AngularJS and the page doesn't move up. I am wondering if this is because I have the index.html page being rendered by ASP.NET MVC?
<!-- Index.html -->
#{
Layout = null;
}
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Orbit Works</title>
#Styles.Render( "~/Content/css/themes/bundle", "~/Content/css/app" )
</head>
<body ng-controller="indexController">
<ptl-header></ptl-header>
<div class="container">
<div ui-view></div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
<div class="container">
<p class="text-muted">© 2015 Michael John Clarke.</p>
<p class="text-muted small">Built using Twitter Bootstrap v3.3.2 and AngularJS v1.3.9</p>
</div>
</nav>
#Scripts.Render( "~/bundles/script/libraries" )
#Scripts.Render( "~/bundles/script/app" )
</body>
</html>
Adding autoscroll="untrue" to the ui-view directive stops the page from scrolling to the child ui-view as described here.
<div ui-view autoscroll="untrue"></div>
I have the following code:
<div id="messageArea">
<div ng-messages="text1.$error">
<div ng-message="required">
Text1 is required ...
</div>
</div>
<div ng-messages="text2.$error">
<div ng-message="required">
Text2 is required ...
</div>
</div>
<div ng-messages="text3.$error">
<div ng-message="required">
Text3 is required ...
</div>
</div>
</div>
<div>Text1<input id="text1" ng-model="text1" name="text1" ng-required="true"></div>
<div>Text2<input id="text2" ng-model="text2" name="text2" ng-required="true"></div>
<div>Text3<input id="text3" ng-model="text3" name="text3" ng-required="true"></div>
I wanted to show one error message at a time. When the first error is solved then the next error message will show. Anyone has any idea how I can do this? Thanks.
Nice solution is use CSS and ng-class
var app = angular.module('app', ['ngMessages']);
.error-wrapper {
color: red;
}
.error-wrapper > .view {
display: block;
}
.error-wrapper > .view ~ .view{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-messages.min.js"></script>
</head>
<body ng-app="app">
<form ng-submit="createWallet()" name='testForm' novalidate>
<div>
<input ng-model='text1' type="text" name='text1' placeholder='text1' required>
</div>
<div>
<input ng-model='text2' type="text" name='text2' placeholder='text2' required>
</div>
<div>
<input ng-model='text3' type="text" name='text3' placeholder='text3' required>
</div>
<div class="error-wrapper">
<div ng-class="{ view: testForm.text1.$invalid }" class="error" ng-messages="testForm.text1.$error">
<div ng-message='required'>Text1 required</div>
</div>
<div ng-class="{ view: testForm.text2.$invalid }" class="error" ng-messages="testForm.text2.$error">
<div ng-message='required'>Text2 required</div>
</div>
<div ng-class="{ view: testForm.text3.$invalid }" class="error" ng-messages="testForm.text3.$error">
<div ng-message='required'>Text3 required</div>
</div>
</div>
<button>Submit</button>
</form>
</body>
</html>
It's show only the first error message with class .view, at the plunker http://plnkr.co/edit/kBSpRJLs6QA2D0jctKXB?p=preview
If you wrap the inputs in a form tag with an ID you can use ng-messages on the form to pick up errors from all the inputs. You can see this here: http://jsbin.com/tikufuvawe/2/edit.
<form name="userDetails">
<input name="userName" type="number" ng-model="number" required ng-maxlength="2" />
<textarea name="text" type="text" ng-model="text" required></textarea>
<div ng-messages="userDetails.$error">
<div ng-message="required">This is required</div>
</div>
</form>
EDIT:
I have updated my example http://jsbin.com/zadojamifo/3/edit using ng-show to hide other errors such that only one will show at a time. Its not a great solution but works for the situation described.
<div ng-messages="userDetails.number.$error">
<div ng-message="required">number is required</div>
</div>
<div ng-messages="userDetails.text.$error" ng-show="!userDetails.number.$error.required">
<div ng-message="required">text is required</div>
</div>
<div ng-messages="userDetails.other.$error" ng-show="!userDetails.number.$error.required && !userDetails.text.$error.required">
<div ng-message="required">other is required</div>
</div>
As you can see the ng-show will get bigger and bigger in size if more validation types are added and if more controls are added that require validation.
Maybe is too late but this is my solution, use ng-messages-multiple to show one or more message, angular respect the order of validation messages:
<form name="loginForm" ng-submit="login()">
<label>Email</label>
<input required name="email" type="email" ng-model="email">
<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$dirty && loginForm.email.$invalid" ng-messages-multiple>
<div ng-message="required">El email es requerido!</div>
<div ng-message="email">El email debe cumplir con el formato: email#dominio.com!</div>
</div>
<label>Contraseña</label>
<input required name="password" type="password" ng-model="password" ng-pattern="passwordPattern" md-maxlength="12">
<div ng-messages="loginForm.password.$error" ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
<div ng-message="required">La contraseña es requerida!</div>
<div ng-message="pattern">Se requieren de 6 a 12 caracteres, por lo menus un dígito, una letra mayuscula y una minúscula</div>
</div>
<div layout="row" layout-align="center center">
<button ng-disabled="loginForm.$invalid>Login</button>
</div>
</form>
You can do something like this
<div id="messageArea">
<div ng-messages="number.$error">
<div ng-message="required">
Number is required ...
</div>
</div>
<div ng-messages="text.$error" ng-if="!number.$error">
<div ng-message="required">
Text is required ...
</div>
</div>
In this case you show the second block of messages only if the first one does not exists (and it's hidden if number.$errors exists)
This sample (http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html) uses a follow solution:
<div ng-messages="my_form.first_name.$error"
ng-if="interacted(my_form.first_name)">
$scope.submitted = false;
$scope.submit = function() {
$scope.submitted = true;
};
$scope.interacted = function(field) {
return $scope.submitted || field.$dirty;
};
If you don't want to show on page load but either on page submit or on change of value then use
<form name="frmSome">
<div ng-messages="userDetails.$error"
ng-if='frmSome.userName.$dirty || frmSome.$submitted'>
<span ng-message="required">Name is Required</span>
<span ng-message="maxlength">Max. 100</span>
</div>
<input name="userName" type="text"
ng-model="model.name"
ng-required='true'
ng-maxlength="30" />
..............................
..............................
<input type='submit' value='Submit' />
</form>
If you touch the text box it will be "dirty"
if try to submit the page "Submitted"
It works on the name not the model
I am really new in AngularJS but I have to make a web app using it, I have some input that control the style of an element (width, height, name, description and color) on the left side of my HTML. I used to had all elements hidden, when the user clicked it appeared and everything worked good, now I started using ui-router, if you click the 'Fullscreen' it will call thet html file. Some inputs work except the one I defined an initial scope value.
I leave a plunker so you can have an idea of what's going on.
http://plnkr.co/edit/jJTcZQb4lzZeAtNl7YZ1?p=preview
The main HTML:
<!doctype html>
<html lang="en" ng-app="bmiChatbuilder">
<head>
<meta charset="UTF-8">
<title>ChatBuilder</title>
<!-- Adding Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/default.css">
<link rel="stylesheet" href="assets/css/colpick.css">
</head>
<body ng-controller="myCtrl">
<div >
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div>
<h3>Select your chat</h3>
<a ui-sref="fullscreen">Fullscreen</a>
<a ui-sref="chatbanner">ChatBanner</a>
<h3>Set your chat options</h3>
<label>Name:</label> <br>
<input type="text" ng-model="chatName" > <br>
<p>{{chatName}}</p>
<label>Description:</label> <br>
<input type="text" ng-model="chatDes" > <br>
<label>Width:</label> <br>
<input type="text" ng-model="myWidth"> <br>
<label>Height:</label> <br>
<input type="text" ng-model="myHeight"> <br>
<h3>Style your chat</h3>
<label>Header background:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myBackground"> <br>
<label>Text color header:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myColor"> <br>
<label>Text color description:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myColordes"> <br>
<h3>Social media</h3>
<p>Want to add social media?</p>
<input type="checkbox" ng-model="showsocialpanel"/>
<label>Yes</label>
<input type="checkbox"/>
<label>No</label> <br/>
<div ng-show="showsocialpanel">
<h3>Style your footer:</h3>
<label>Powered By:</label> <br/>
<input type="text" ng-model="poweredBy"/> <br/>
<label>Your background footer:</label> <br/>
<input type="text" class="color {hash:true}" ng-model="mySocialbg"/> <br/>
<h3>Add your social</h3>
<input type="checkbox" ng-model="facebookiconshow"/><label>Facebook</label> <br/>
<input type="text" ng-show="facebookiconshow" ng-model="facebooklink"placeholder="http://www.facebook.com"/>
<br/>
<input type="checkbox" ng-model="twittericonshow"/><label>Twitter</label> <br/>
<input type="text" ng-show="twittericonshow" ng-model="twitterlink"placeholder="http://www.twitter.com"/>
<br/>
<input type="checkbox" ng-model="linkediniconshow"/><label>Linkedin</label><br/>
<input type="text" ng-show="linkediniconshow" ng-model="linkedinlink"placeholder="http://www.linkedin.com"/>
</div>
</div>
</div>
<div class="col-lg-10">
<div ui-view></div>
</div>
</div>
</div>
The fullscreen HTML:
<div id="chat_box" ng-style="{width:myWidth}">
<div id="chat_top">
<div id="chat_avatar">
</div>
<div id="chat_header" ng-style="{background: myBackground}">
<h4 ng-style="{color:myColor}">{{chatName}}</h4>
<p ng-style="{color:myColordes}">{{chatDes}}</p>
</div>
</div>
<div id="chat_container">
<div id="history_div" ng-style="{height:myHeight}">
<div id="history_mc">
</div>
</div>
</div>
<div id="chat_footer">
<textarea id="input_area" rows="0"
type="text" maxlength="75" onkeypress="chatHandler(event)"></textarea>
<div class="social_media" ng-show="showsocialpanel" ng-style="{background:mySocialbg}">
<ul>
<li ng-show="facebookiconshow">
<a ng-href="{{facebooklink}}" target="_blank">
<img src="assets/img/facebook.png" alt="Facebook Icon"/>
</a>
</li>
<li ng-show="twittericonshow">
<a ng-href="{{twitterlink}}" target="_blank">
<img src="assets/img/twitter.png" alt="Twitter Icon"/>
</a>
</li>
<li ng-show="linkediniconshow">
<a ng-href="{{linkedinlink}}" target="_blank">
<img src="assets/img/linkedin.png" alt="Linkedin Icon"/>
</a>
</li>
</ul>
</div>
</div>
</div>
The JS:
var bmiChatbuilder = angular.module('bmiChatbuilder', ['ui.router'])
bmiChatbuilder.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/")
$stateProvider
.state('fullscreen', {
url: "/fullscreen",
templateUrl: "fullscreen.html",
controller:"myCtrl"
})
})
bmiChatbuilder.controller('myCtrl', function ($scope) {
$scope.chatName = 'Type your text tittle here';
$scope.chatDes = 'Type your description here';
$scope.myWidth = '800px';
$scope.myHeight = '400px';
})
Thanks in advance for your help.
Router creates new myCtrl instance with it's own scope. You can create service to share data between two controllers or create another controller type for /fullscreen.
I've created a basic angular form and can't determine why it's not submitting.
http://contact-info.checkoutbiblebowl.com/
The form validation is valid and it still won't submit. I feel like I've overlooked something silly, but have looked at this over the last few days and can't figure out what it is. Any suggestions?
<form method='post' action='' name='form' novalidate ng-controller="myController">
<div class="row form">
<div class="form-inline">
<div class="form-row">
<label class="form-label" style='margin-top: 20px'>Name</label>
<div class="form-item">
<div style="float: left">
First<br/>
<input type="text" ng-model="firstName" name="firstName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.firstName.$error.required" class="required">First name is required</div>
</div>
<div style="float: left; margin-left: 1em">
Last<br/>
<input type="text" ng-model="lastName" name="lastName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.lastName.$error.required" class="required">Last name is required</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="button-row">
<button ng-disabled="!form.$valid" type="submit" class="btn" ng-click="debug()">Submit</button>
</div>
</div>
</div>
</form>
My Controller:
<script type="text/javascript">
angular.module('contact', []).
controller('myController', function ($scope) {
$scope.debug = function () {
console.log($scope.form);
}
});
</script>
I think you just need to specify the action explicitly, not with an empty string otherwise angular will prevent the submission.
http://docs.angularjs.org/api/ng.directive:form
like so:
http://plnkr.co/edit/WtP03BFVyEsnOqf3n8a4?p=preview