I am using simple example of ng-plurazlize .I don't why it is not printing value .can you please explain why it is not working ?
here is plunker
http://plnkr.co/edit/JnOAa2B0hHSL22hIL2MY?p=preview
<input type="text" ng-model='plCount'/>
<h1><ng-plurazlize count="plCount" offset=when="{'0':'one','other':'{}are'}"></ng-plurazlize>
</h1>
There was a typo in there, plus your when parameter was wrong. Should be something like this:
<ng-pluralize count="plCount" when="{'0':'one','other':'{}are'}">
</ng-pluralize>
You offset parameter is incorrect. This should be a number. For example:
<ng-pluralize count="plCount" offset=2 when="{'0':'one','other':'{}are'}">
</ng-pluralize>
I have it working here: http://plnkr.co/edit/eqxOlDnw6cHCbqlWBmk3?p=preview
Here is the HTML:
<div ng-app="app">
<div ng-controller="TestCtrl">
<input type="text" ng-model='plCount' />
<h1>
<ng-pluralize count="plCount" offset=2 when="{'0':'one','other':'{}are'}">
</ng-pluralize>
</h1>
</div>
</div>
The JavaScript was missing too. I added it:
var app = angular.module('app', []);
app.controller('TestCtrl', function ($scope) {
$scope.plCount = '0';
})
Related
I need one help. I need to create extra input element using ng-repeat in angular.js. I did something but its not working. I explaining my code below.
<div>
<ul>
<li ng-repeat="r in arr">
<input type="text" ng-model="r.uname">
</li>
</ul>
</div>
<button type="button" id="btn" ng-click="create();">Add</button>
Here I need when user will click on add button the new input field will create just below the first one. My scripting side code is given below.
<script type="text/javascript">
function ContactController($scope){
$scope.arr=[{uname:null}];
$scope.create=function(){
console.log('hii');
$scope.arr.push({
uname:null
});
console.log('hi',$scope.arr);
}
}
</script>
But here i am unable to generate the new input type element. Please help me.
I don't see an error in your code. it works: http://jsfiddle.net/Lvc0u55v/9536/
$scope.arr=[{uname: null}];
$scope.create = function(){
console.log('hii');
$scope.arr.push({
uname: null
});
console.log('hi',$scope.arr);
}
Define your array like this..
$scope.arr=[{}];
$scope.create=function(){
$scope.arr.push({});
console.log('hi',$scope.arr);
}
everything else looks fine..
Please refer to this.
Use track by in order to achieve the thing you're aiming for:
<li ng-repeat="r in arr track by $index">
the first thing u are pushing the same element in the array so you want to track the in the ng-repeat
<div ng-repeat="r in arr track by $index">
<input type="text" ng-model="r.uname"> </div>
still it is not creating then try the console is coming and it is not creating
use $scope.$apply() to manually run the digest cycle
Which version of angular are you running. The code which you mentioned would not work in angular 1.3 and above. It works in 1.2 though. See this with 1.2
https://plnkr.co/edit/52ygFNbSFZQr3SdCvlDc?p=preview
<body ng-controller="ContactController">
<p>Hello {{name}}!</p>
<div>
<ul>
<li ng-repeat="r in arr">
<input type="text" ng-model="r.uname">
</li>
</ul>
</div>
<button type="button" id="btn" ng-click="create();">Add</button>
<script type="text/javascript">
function ContactController($scope){
$scope.arr=[{uname:null}];
$scope.create=function(){
console.log('hii');
$scope.arr.push({
uname:null
});
console.log('hi',$scope.arr);
}
}
</script>
For 1.4 and above use the following. https://plnkr.co/edit/t7STLztqoMiPKaiHr62V?p=preview
<body ng-controller="ContactController">
<p>Hello {{name}}!</p>
<div>
<ul>
<li ng-repeat="r in arr">
<input type="text" ng-model="r.uname">
</li>
</ul>
</div>
Add
app.controller('ContactController', function($scope) {
$scope.name = 'World';
$scope.arr=[{uname:null}];
$scope.create=function(){
console.log('hii');
$scope.arr.push({
uname:null
});
console.log('hi',$scope.arr);
}
});
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.
I'm just starting out with AngularJS and have hit a really simple snag that I just can't seem to get past. All I want to do is initialize some values when the page loads. It doesn't happen.
Here's the code:
var bookingAppModule = angular.module('bookingApp', []);
bookingAppModule.controller('bookingController', ['$scope', function ($scope) {
$scope.bookingDate = '2014/04/28';
$scope.alertMessage = "initialized";
}]);
</script>
<div id ="booking-app" ng-app="bookingApp"">
<div >
{{bookingDate}}<br />
<input type="date" ng-model="bookingDate" />
<br />
{{alertMessage}}
</div>
</div>
What am I missing here? BTW, I also tried putting an init() function on the controller and using ng-init= "init()", but that doesn't work either. I can initialize the values using ng-init ="bookingDate= ...", but that is not what I want.
Put the ng-app attribute in the HTML tag. Reference ng-controller in the booking-app div like this:
<div id ="booking-app" ng-controller="bookingController"">