I have a piece of code on which angularjs ng-message doesnot seem to work.
Here is a JSfiddle
<div ng-app="app" ng-controller="myctrl">
<form name="myform" novalidate>
error: {{myform.definition.$error}}
<textarea ng-blur="handleBlur(myform)"
name="definition"
ng-model="$ctrl.definition"
ng-blur="$ctrl.handleBlur(myform)">
</textarea>
<div ng-messages="myform.definition.$error">
<div ng-message="validationError">
Please enter a value for this field.
</div>
</div>
</form>
</div>
controller:
angular.module('app', []).controller('myctrl', function($scope) {
$scope.someval = true;
$scope.handleBlur = function(form) {
form.definition.$error.validationError = false;
$scope.someval = !$scope.someval
form.definition.$error['validationError'] = $scope.someval;
}
})
From the docs, https://docs.angularjs.org/api/ngMessages#dynamic-messaging
Feel free to use other structural directives such as ng-if and
ng-switch to further control what messages are active and when. Be
careful, if you place ng-message on the same element as these
structural directives, AngularJS may not be able to determine if a
message is active or not. Therefore it is best to place the ng-message
on a child element of the structural directive.
From:
<div ng-messages="myform.definition.$error">
<div ng-message="validationError">
Please enter a value for this field.
</div>
</div>
To:
<div ng-messages="myform.definition.$error">
<div ng-if="showRequiredError">
<div ng-message="validationError">
Please enter a value for this field.
</div>
</div>
</div>
Related
Angular Js Show the Checkbox's Checked when Page Loads.
I am saving the Checkboxes. when I Reload the Page I want to show the selected checkboxes
<md-checkbox ng-repeat="primaryPrograms in ctrl.primaryProgramStudies" ng-model="ctrl.primaryProgramStudiesSelected[primaryPrograms.id]" ng-checked="primaryPrograms.selected==true">
{{primaryPrograms.name}}
</md-checkbox>
Script :
ctrl.primaryProgramStudiesSelected =
[{"id":1,"name":"SAT","selected":false},{"id":2,"name":"ACT","selected":true},{"id":3,"name":"PSAT","selected":false},{"id":4,"name":"ISEE\/SSAT","selected":false},{"id":5,"name":"AP","selected":true},{"id":6,"name":"General GPA Management","selected":true},{"id":7,"name":"Reading","selected":false},{"id":8,"name":"Math","selected":false},{"id":9,"name":"Science","selected":false},{"id":10,"name":"Social Studies","selected":false},{"id":11,"name":"ESL","selected":true},{"id":12,"name":"College Admissions","selected":true},{"id":13,"name":"TOEFL ","selected":false}]]`
ngChecked directive should not be used together with ngModel, as this can lead to unexpected behavior.
https://docs.angularjs.org/api/ng/directive/ngChecked
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope) {
$scope.items = [{"id":1,"name":"SAT","selected":false},{"id":2,"name":"ACT","selected":true},{"id":3,"name":"PSAT","selected":false},{"id":4,"name":"ISEE\/SSAT","selected":false},{"id":5,"name":"AP","selected":true},{"id":6,"name":"General GPA Management","selected":true},{"id":7,"name":"Reading","selected":false},{"id":8,"name":"Math","selected":false},{"id":9,"name":"Science","selected":false},{"id":10,"name":"Social Studies","selected":false},{"id":11,"name":"ESL","selected":true},{"id":12,"name":"College Admissions","selected":true},{"id":13,"name":"TOEFL ","selected":false}];
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-sanitize.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="AppCtrl" class="md-padding demo checkboxdemoSelectAll">
<div layout="row" layout-wrap="">
<div flex="100" layout="column">
<div>
<fieldset class="demo-fieldset">
<legend class="demo-legend">Select </legend>
<div layout="row" layout-wrap="" flex="">
<div class="demo-select-all-checkboxes" flex="100">
<md-checkbox ng-repeat="item in items" ng-model="item.selected">
{{ item }}
</md-checkbox>
</div>
</div>
</fieldset>
</div>
</div>
</div></div>
</div>
While reload the app, Everything reload & the code is render freshly. And whatever changes made in client side(without server side), everything gone.
So as per #Pengyy comment you have to store the selected items to server / cookies / localstorage. Then when reload pages just read the stored data and reset check boxes.
Change ng-model="ctrl.primaryProgramStudiesSelected[primaryPrograms.id]" to ng-model="ctrl.primaryProgramStudiesSelected[primaryPrograms.selected]".
Then add selected property to every object in your primaryProgramStudiesSelected array. If you want it to be selected by default, make the selected property true.
Can you try something like this:
<div ng-repeat="primaryPrograms in ctrl.primaryProgramStudies">
<div class="checkbox">
<label>
<input ng-model="primaryPrograms.selected" ng-true-value="true" ng-false-value="false" type="checkbox" ng-checked="primaryPrograms.selected === true"> Checked
</label>
</div>
</div>
Note: if you are using mysql your true/false fields are probably tiny int, and you should use ng-true-value="1" ng-false-value="0".
Also note that in controller you already should set selected to true, im not sure how you get your data and how you know if field is selected. But this example should work.
I have the following code in my html.
<div id="section">
<div new-exercise ng-repeat="section in sections track by $index">
</div>
</div>
<div class="add_exercise add_exercise_btn">
<a class="add_exercise_link" ng-click="addExercise()">
<span>+ Add an Exercise</span>
</a>
</div>
the method addExercise() adds a new element to the variable sections, hence updating the html with another template (represented by directive new-exercise).
i.e.
$scope.addExercise = function(){
$scope.sections.push({
title: "hello",
content: "fsa"
});
}
The directive new-exercise:
.directive('newExercise', function () {
return {
templateUrl: '/templates/exercise-form.html',
replace: true,
}
})
The template exercise-form.html:
<div class="add_exercise" id="add_exercise_form" data-section-id="{{id}}">
<form class="new_section">
<div class="input-box">
<input id="title" type="text" name="title" class="form-control" value="{{section.title}}" ng-model="section.title">
<label for="title">Exercise Name</label>
<span class="help-block"></span>
<span>{{ section.title }}</span>
</div>
</form>
</div>
I expect the template exercise-form.html to update the value inside input to be hello but the scope is empty.
However, if I remove the directive and add the template html under ng-repeat it works as I expect. I feel that the scope is lost due to directive, but not so sure about the exact reason. Can anyone explain me the reason and how to resolve?
Thanks.
Remove the replace: true in your directive.
Corrected directive given below:
.directive('newExercise', function () {
return {
templateUrl: '/templates/exercise-form.html'
}
})
I have a div that I am hiding/showing using angular in my HTML, but I want to know how to check if it is currently hidden or not in my controller.
Any solutions I have found so far are jQuery based using 'hasClass' to find ng-hide, but I don't want to use jQuery.
My div looks like this
<div class="item item-input" ng-show="showDetails"></div>
<button class="button button-block button-light leftTextButton"
ng-click="showDetails = ! showDetails; updateTimes()">
<i ng-class="{'icon icon ion-minus-round': showDetails,
'icon icon ion-plus-round': !showDetails}"></i> End Time</button>
I thought from my controller I could just call if($scope.showDetails) and that would return true or false, but it is undefined.
How can I check if a div if hidden or showing from my controller? Thanks
I'm guessing you are having a scoping issue. Passing it to the function that will check it is the best bet. Otherwise if it is in scope the controller should be able to access it.
angular.module('MyApp', [])
.controller('MyController', ['$scope',
function($scope) {
$scope.myBoolean = false;
$scope.checkMyBooleanOnScope = function() {
alert($scope.myBoolean);
};
$scope.checkMyOtherBooleanOnScope = function() {
alert($scope.myOtherBoolean);
};
$scope.checkBooleanByPassingIt = function(bool) {
alert(bool);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<p>myBoolean predefined in the controller:{{myBoolean}}
<input type="checkbox" ng-model="myBoolean" />
</p>
<p>
<button ng-click="checkMyBooleanOnScope()">checkMyOtherBooleanOnScope</button>
<button ng-click="checkBooleanByPassingIt(myBoolean)">checkMyBooleanByPassingIt</button>
</p>
<p>myOtherBoolean defined on the page with ng-model:{{myOtherBoolean}}
<input type="checkbox" ng-model="myOtherBoolean" />
</p>
<p>
<button ng-click="checkMyOtherBooleanOnScope()">checkMyBooleanOnScope</button>
<button ng-click="checkBooleanByPassingIt(myOtherBoolean)">checkMyOtherBooleanByPassingIt</button>
</p>
</div>
I've got a page in my website in which I want to show a checkbox. I only want to show the checkbox if the model is initially false. So I wrote this (this was my initial code, but it was a simplified version of what I have myself. I updated the code in the snippet at the end of this question to show the problem):
<div ng-if="!the_field">
<input ng-model="the_field" type="checkbox">
</div>
The problem is that if I click the checkbox, it disappears. That of course makes sense, but I have no idea how to solve this.
So what I basically want is to show the checkbox if the model was false upon rendering the HTML. But after that I want to somehow break the databinding so that the checkbox remains on the page even if the model changes to true.
Does anybody know how I can achieve this? All tips are welcome!
[EDIT]
I would prefer doing this from within the template, so that I don't get a double list of these fields (because I've got about 50 of them). Any ideas?
[EDIT 2]
Turns out that it did work with the example above, which was a simplified version of my own code. In my own code however, I'm not using simple a field, but an item in a dict. I updated the code above and made a snippet below to show the problem:
var MainController = function($scope){
$scope.the_field = {};
$scope.the_field.item = false;
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainController">
parent: {{the_field.item}}
<div ng-if="!the_field.item">
child: {{the_field.item}}<br>
<input ng-model="the_field.item" type="checkbox">
</div>
</div>
You can clone the source object. Like this:
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.the_field = false;
$scope.the_field_clone = angular.copy($scope.the_field);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
{{the_field}}
<div ng-if="!the_field_clone">
<input ng-model="$parent.the_field" type="checkbox">
</div>
</div>
http://jsbin.com/ditoka/edit?html,js
Update - option 2 - Directive
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.the_field = false;
}).
directive('customIf', function() {
return {
scope: {
customIf: '='
},
link: function(scope, element, attrs) {
if (!scope.customIf) {
element.remove();
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
{{the_field}}
<div custom-if="!the_field">
<input ng-model="the_field" type="checkbox">
</div>
</div>
It works with the code of your question, try it out ;)
(see What are Scopes?)
var MainController = function($scope){
$scope.the_field = false;
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainController">
parent: {{the_field}}
<div ng-if="!the_field">
child: {{the_field}}<br>
<input ng-model="the_field" type="checkbox">
</div>
</div>
The answer to your updated question:
You can use another property in your model, edited when the first click occurs...
var MainController = function($scope){
$scope.model = {init: true, the_field: false};
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainController">
parent: {{model.the_field}}
<div ng-if="!model.the_field || !model.init">
<input ng-model="model.the_field" type="checkbox" ng-click="model.init=false;">
</div>
</div>
I had a hard issue figuring out on how to hide and show icon/text with angular code. I am completely new to angular and tried hard on the below fiddle code. How do I hide + or minus icon with .closest in such dom scenarios.
<div ng-controller="MyCtrl">
{{name}}
<div data-toggle="collapse" aria-expanded="true" data-target="#list-item-line-0" id="expandCollapseChild" ng-click="addExpandCollapseChildIcon()">
<div>
<div>
<label>
<div>
<span class="icon-expand">-</span>
<span class="icon-collapse">+</span>
</div>
<div>
Click me to hide minus icon
</div>
</label>
</div>
</div>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.addExpandCollapseChildIcon = function() {
alert('');
if (angular.element('#expandCollapseChild').hasClass('collapsed')) {
angular.element(this).closest('.icon-collapse').css('display', 'none');
} else {
if (angular.element('#expandCollapseChild').hasClass('collapsed')) {
angular.element(this).closest('.icon-collapse').css('display', 'block');
}
}
}
In Angular, this is the wrong approach. You shouldn't actually show or hide elements inside the controller. That's applying a jQuery style (working directly on the DOM) to Angular.
In Angular, you'd use something like ng-if, ng-show or ng-class, all of which can link back to a property on the scope object that is accessible via the controller.
Here are some examples:
<div ng-if="myProp === 'ShowMe'">
<div ng-show="myProp === 'ShowMe'">
<div ng-class="{myCssClass: myProp === 'ShowMe'">
Inside your controller, you'd have something like this:
function MyCtrl($scope) {
$scope.myProp = 'ShowMe';
$scope.addExpandCollapseChildIcon = function(newPropValue) {
$scope.myProp = newPropValue;
}
}
Here's some links to documentation on ng-if, ng-show and ng-class:
https://docs.angularjs.org/api/ng/directive/ngIf
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngClass
AngularJS has a bunch of angulary ways of doing things, your question for example might look like this:
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.collapsed = true;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<span ng-bind="collapsed ? '+' : '-'"></span>
</div>
</div>
It watches a model and changes it's appearance based on that model using the ternary operator within ng-bind.
The way you defined your app and controller was incorrect. There's a bunch of different ways to do this as you can see from the answers.
I took this approach:
<div ng-app='myApp' ng-controller="MyCtrl">
{{name}}
<div>
<div>
<div>
<label>
<div>
<span ng-show='(collapsed != false)' class="icon-expand">-</span>
<span ng-show='(collapsed == false)' class="icon-collapse">+</span>
</div>
<div ng-click='collapsed = !collapsed'>
Click me to hide minus icon
</div>
</label>
</div>
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.name = 'Superhero';
$scope.collapsed = false;
});
</script>
Create a scoped variable that indicated whether or not it is collapsed . Then change that variable and the ng-shows will react.