my problem is that when change model not change position element ui-switch
if use just checkbox then all work
my html
<input type="checkbox" data-group="{{ roomPerson.person.transfer.is_group }}"
ng-disabled="!isEdit()"
class="js-switch"
ng-change="toggleTransfer(roomPerson)"
ng-model="roomPerson.person.transfer.isIncluded"
ui-switch="{color: '#3aa99e',size:'small'}"/>
thanks in advance
I'm not sure where you get your ui-switch example from?
It should be added using the switch directive.
angular.module('test', ['uiSwitch']).controller('Test', Test);
function Test($scope) {}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://rawgit.com/xpepermint/angular-ui-switch/master/angular-ui-switch.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/xpepermint/angular-ui-switch/master/angular-ui-switch.min.css"/>
<div ng-app='test' ng-controller='Test'>
<input type="checkbox"
ng-model="isChecked"/>
<switch ng-model="isChecked"/>
</div>
Related
I am new to Angular JS. I have 1 controller and 2 views. 1st view is supposed to be filled with user. when user filling the data I am storing those values using ng-model in controller(For $scope). After submission of the form, I want to use that data in 2nd page. But I am not getting anything. is there any rule like one controller should be specific to one view. Because when I try to display data on 1st pageI am getting correctly. But when I try the same code onpage2.html I am not getting any value and any error even though page is loaded. I searched a lot on SO. but could not find proper solution. I would be very thankful to U, if anyone of U helps me.Thanks a lot in advance
script.js
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.item="";
$scope.remarks="";
$scope.divCount=[{}];
$scope.addDiv=function(){
$scope.divCount.push({});
};
})
Page1.html
<html>
<head>
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body
<form action="page2.html">
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="count in divCount">
Item : <textarea rows="4" cols="50" ng-model="item"> </textarea> <br><br/>
Remarks: <textarea ng-model="remarks" rows="2" cols="50"></textarea> <br><br/>
<div>
<button ng-click="addDiv();">Add Another Item</button>
</div>
</div>
</div>
<input type="submit" value="submit"/>
</form>
</body>
</html>
page2.html
<div ng-controller="myCtrl">
<div> item: {{item}} </div>
<div> remarks: {{remarks}}</div>
</div>
If you want use one controller in two page use ui-router .
You can see here for more infomation
https://github.com/angular-ui/ui-router/wiki
But i recommend you dont do that using a single controller for multiple views (pages, as you say) is a very poor design for an angular app
On click of submit button in Page1.html store the required data in a service/factory. Retrieve the data from the service/factory in page2.html
The default hide directive with angular-formly is ng-if which can be configured via e.g. the formlyConfigProvider.
Currently all my fields should always be shown and I don't want to have unneccesary ng-if="!field.hide" checks rendered that can inpact the performance.
How can I tell formly not to use this check per field/form or globally?
ng-if add and remove elements from the DOM, when you want to show and hide large number of elements it can be slow, insted you can use ng-show.
ng-show will only change the visibility of the element.
<html lang="en" itemscope="" itemtype="http://schema.org/Article">
<head>
<script>
var oModelesDep = [];
</script>
<!-- Angular Material requires Angular.js Libraries -->
<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-animate.min.js"></script>
<script src="https://s3.amazonaws.com/gowpres/resources/js/utils/jquery-1.10.2.js"></script>
<!-- Angular Material Library -->
<script src="https://www.weldpad.com/starterkit.js?containerId=60515"></script>
<script data-meta="61021" src="https://www.weldpad.com/sogettopanswerers.html?containerId=61021"></script>
</head>
<body ng-controller="AppCtrl" ng-app="MyApp">
<h4 ng-init="showchat = true">Your - Starter Kit</h4>
<button ng-click="showchat = false">hide</button>
<button ng-click="showchat = true">show</button>
{{showchat}}
<sogettopanswerers ng-show="showchat" tag="html">
<div ng-repeat="qdata in listqdata.items track by $index" style="background-color: white;">
<div class="well" style="overflow: auto;">
<h2>
<a href="{{qdata.link}}" class="question-hyperlink">
{{qdata.title}}
</a>
<small>{{qdata.view_count}} Views</small></h2>
<contentashtml ng-init="load()" content="qdata.body">
</contentashtml>
<div style="padding:15px;display: inline-block;vertical-align: top;">
<p>Name: {{qdata.owner.display_name}}</p>
<a href="{{qdata.owner.link}}">
<img ng-src="{{qdata.owner.profile_image}}" alt="Description"/>
</a>
</div>
<div style="display: inline-block;">
<p>Created: <span am-time-ago="qdata.creation_date * 1000"></span></p>
<p>
Last Update:<span am-time-ago="qdata.last_activity_date * 1000"></span>
</p>
<p>
Answered:{{qdata.is_answered}}
</p>
</div>
<p>
Answers:{{qdata.answer_count}}
</p>
</div>
</div>
</sogettopanswerers>
</body>
</html>
Look at the line:
<sogettopanswerers ng-show="showchat" tag="html">
and see how fast the response is.
you set hide-directive="ng-show" in the formly-form
<formly-form hide-directive="ng-show"></formly-form>
"hide-directive
Allows you to control the directive used to hide fields. Common value for this might be ng-show. It will be passed !field.hide. You can also specify this on a global level using formlyConfig.extras.defaultHideDirective = 'ng-show'"
http://docs.angular-formly.com/docs/formly-form
So you can either set it as I instructed or you can choose to edit it in the config on startup for all fields
I've been trying to trigger a validation error on <md-contact-chips> for ng-minlength/maxlength/required but haven't been able to implement this effectively.
Is there a straight forward way to implement this myself? -- it seems for some reason that the contact chips directive in Angular Material does not support these validations.
See codepen here:
http://codepen.io/anon/pen/YqdRNw
<form name='myForm'>
<div ng-controller="ContactChipDemoCtrl as ctrl" layout="column" ng-cloak="" class="chipsdemoContactChips" ng-app="MyApp">
<md-content class="md-padding autocomplete" layout="column">
<md-contact-chips ng-model="ctrl.contacts" ng-minlength='1' ng-required='true' ng-maxlenght='3' name='contacts' md-contacts="ctrl.querySearch($query)" md-contact-name="name" md-contact-image="image" md-contact-email="email" md-require-match="true" md-highlight-flags="i" filter-selected="ctrl.filterSelected" placeholder="To" >
</md-contact-chips>
<p ng-show="myForm.contacts.$error.required" class="text-danger">You did not enter a contact</p>
<p ng-show="myForm.contacts.$error.minlength" class="text-danger">Your contact list is too short</p>
<p ng-show="myForm.contacts.$error.maxlength" class="text-danger">Your contact list is too long</p>
</md-content>
</div>
</form>
You cannot use this attribute directly. you have to use custom validation for it.
<md-contact-chips ng-model="ctrl.contacts" md-transform-chip="customvalidation($chip)"> </md-contact-chips>
<p ng-show="ctrl.contacts.length == 0 && ctrl.contacts.$touched"> Required </p>
<p ng-show="ctrl.contacts.length < 3 && ctrl.contacts.$touched"> Minimum 2 Contacts are required </p>
<p ng-show="ctrl.contacts.length > 5 && ctrl.contacts.$touched"> Maximum 5 Contacts can be added </p>
Inside controller you can define customvalidation function and add extra condition if you want.
function customvalidation(chip){
if(satisifedCondition(chip)){
return null //It will add chip
} else { return undefined } // It will not add chip
}
For the time being, you will need to write your own validation. Currently, md-chips only supports md-max-chips validation. Other forms of validation are currently pending. md-chips api
You can use the chips length property to get the number of chips in the array. With this you can use ng-show on your error messages to perform the necessary validation checks.
Ex: ng-show="myForm.contacts.length == 0"
Additionally, you can use md-on-add or md-on-remove to write your own validation.
Thats the how can I handle required validation with md-chips and md-contact-chips
I don't test code completely but I wrote that for give you an idea. I hope it helps you !
angular.module('MyApp', ['ngMaterial'])
.controller("ContactChipDemoCtrl", ['$scope', function ContactChipDemoCtrl($scope) {
$scope.formRequiredError = {};
$scope.sendButton = function(form) {
$scope.formRequiredError = {
"required": $scope.contacts.length <= 0;
};
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<html lang="en" ng-app="MyApp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
</head>
<body layout="column" ng-controller="ContactChipDemoCtrl as ctrl">
<form name='myForm'>
<div layout="column" ng-cloak="" class="chipsdemoContactChips">
<md-content class="md-padding autocomplete" layout="column">
<md-contact-chips ng-model="ctrl.contacts" ng-minlength='1' ng-required='true' ng-maxlenght='3' name='contacts' md-contacts="ctrl.querySearch($query)" md-contact-name="name" md-contact-image="image" md-contact-email="email" md-require-match="true" md-highlight-flags="i"
filter-selected="ctrl.filterSelected" placeholder="To">
</md-contact-chips>
<p ng-show="myForm.contacts.$error.minlength" class="text-danger">Your contact list is too short</p>
<p ng-show="myForm.contacts.$error.maxlength" class="text-danger">Your contact list is too long</p>
</md-content>
</div>
<div class="custom-error" ng-if="ctrl.contacts.length <= 0">
<div ng-messages="formRequiredError">
<div ng-message="required" translate='form_user_empty'></div>
</div>
</div>
</form>
</body>
</html>
Simple workaround:
<md-contact-chips
ng-class="{'myError': object.fieldName !== undefined && object.fieldName.length == 0}"
ng-model="object.fieldName"
otherStuff></md-contact-chips>
In CSS
.myError input::placeholder {
color: rgb(221,44,0) !important;
}
Is it possible to have a string inside an Angular expression? For example:
<p><strong>Phone:</strong> {{ phone }}</p>
Would it be possible to have that <strong> tag inside that expression, so Phone: isn't rendered to the page, unless something is pulled from the {{ phone }} expression?
Hope that makes sense.
Any help is appreciated.
Thanks in advance!
You can use ng-show to show elements only under certain conditions, so in your case you can hide the complete p element if the desired value is not defined using ng-show:
(or you can use ng-if to completely skip that element as Rahil Wazir mentioned in his comment)
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope){
$scope.phone1 = '1234';
$scope.phone2 = undefined;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<p ng-if="phone1"><strong>Phone: {{phone1}}</strong></p>
<p ng-if="phone2"><strong>Phone: {{phone2}}</strong></p>
</div>
</div>
Use ng-show directive.
https://docs.angularjs.org/api/ng/directive/ngShow
Or use ng-hide directive too.
Hope it helps.
Yes you can use Strong tag in AngularJS
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="personController">
Phone: <input type="text" ng-model="phone "><br>
<br>
<p><strong>Phone:</strong> {{ phone }}</p>
</div>
<script>
function personController($scope) {
$scope.phone = "987654321"
}
</script>
</body>
</html>
yes, you can just use {{ 'some random string' + x }}. Here 'x' is a variable defined on the whichever scope this expression is referring to.
string concatenation will happen as you would expect.
So I'm trying to zebra stripe my ng-repeat so the rows can be easily distinguished.
I think I have everything wired up correctly, but the classes just aren't being applied.
I've created a plunker here.
My html looks like this:
<div ng-repeat="removal in removals" ng-class-even="even" ng-class-odd="odd" class="remove-relation-titles-list">
<div class="pull-left relation-titles-left-list">
<span class="acct-title acct-num">{{removal.AcctType}} {{removal.AcctNo}}</span>
<span class="acct-title"> - Standard Checking</span>
</div>
</div>
So, the regular class is being applied just fine, but the even and odd ones aren't at all. If you inspect the object and add the even class yourself, it shows up beautifully. I've tried moving this down to the div inside the ng-repeat with no results.
Am I missing something obvious?
Change your ng-class to:-
ng-class="{'even':$even,'odd':$odd}"
Plnkr
$even and $odd are the properties added by ng-repeat on its scope.
or change it to take string value of the class names otherwise it will try to replace the class based on the property even or odd which does not exist:-
ng-class-odd="'odd'" ng-class-even="'even'"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17" data-require="angular.js#1.0.7"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="removeTitlesCtrl">
<div id="body_content_wrapper">
<div>
<h4 class="heading toggle header-block">These are the accounts chosen</h4>
</div>
<div ng-repeat="removal in removals" ng-class-even="'even'" ng-class-odd="'odd'" class="remove-relation-titles-list">
<div class="pull-left relation-titles-left-list">
<span class="acct-title acct-num">{{removal.AcctType}} {{removal.AcctNo}}</span>
<span class="acct-title"> - Standard Checking</span>
</div>
</div>
</div>
</div>
</body>
</html>
This is a simple mistake please correct.
ng-class-even="'even'" ng-class-odd="'odd'"