I have created an array example. There is a text box that accepts the number and on clicking on add, it adds the number to a defined array. And on display i want it to display the array. But what is happening is, as soon as i click on add button, the number simultaneously is being displayed on the HTML page. I guess its because of ng-model, but i want it to be displayed only when i click on display button. Please help.
<html ng-app="Swabhav.Array">
<head>
<title>Array</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="ArrayController">
<input type="text" ng-model="arraynumber">
<button type="button" value="Add" ng-
click="addElementToArray(arraynumber)">Add</button>
<button type="button" value="Display" ng-
click="displayElementsInArray()">Display</button>
<li ng-repeat="element in elements track by $index ">
<h4> {{element}} </h4>
</li>
</div>
<script>
angular.module("Swabhav.Array",[])
.controller("ArrayController",
["$scope","$log",function($scope,$log){
$scope.numbers=[];
$scope.number="";
$scope.addElementToArray=function(number){
$scope.numbers.push(number);
$log.log("inside add "+ $scope.numbers)
}
$scope.elements=[];
$scope.displayElementsInArray=function(){
$log.log("Inside Display")
$scope.elements.push($scope.numbers);
}
}])
</script>
</body>
</html>
You can try like the below code, also check this working plunker link for your example scenario.
Controller:
$scope.numbers=[];
$scope.elements=[];
$scope.addElementToArray=function(number){
$scope.numbers.push(number);
$scope.arraynumber='';
};
$scope.displayElementsInArray=function(){
angular.extend($scope.elements, $scope.numbers)
};
Related
I am new to AngularJS. I'm trying to toggle a modal into view using ng-if and ng-click.
Essentially, in my controller, I have a scoped variable called "aboutOn". When it is true, the modal is displayed. When it's false, it's not. Simple.
The ng-if part works. But the ng-click part is causing trouble. Sometimes, it just doesn't work.
To open the modal I have this:
<div id="about-link-container" ng-click="aboutOn=true">
<p><i class="far fa-info-circle"></i> About</p>
</div>
This does not work how I want it to work. If I click on the actual text, nothing happens. It only triggers when I click around the border, not directly on the link. If I put the ng-click on the p tag, it doesn't work at all.
Then inside the modal, I have this to close it:
<div class="about-close">
<i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>
This doesn't work at all. What's going on here? Here is my controller, if that's possibly related:
angular.module('myApp', [])
.controller('myController', ['$scope', function myController($scope) {
$scope.female_name = "female name";
$scope.position = "position";
$scope.tedious_task = "tedious task";
$scope.dirty_task = "dirty task";
$scope.female_name = "female name";
$scope.celebrity = "celebrity";
$scope.useless_skill = "useless skill";
$scope.aboutOn = false;
}]);
Here is the entire view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower|Oswald" rel="stylesheet">
<script data-require="angular.js#1.3.10" data-semver="1.3.10" src="https://code.angularjs.org/1.3.10/angular.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body ng-app="myApp">
<div ng-controller='myController'>
<div class="form">
<div id="about-link-container" ng-click="aboutOn=true">
<p><i class="far fa-info-circle"></i> About</p>
</div>
<h1>M<img src="angular-logo.png" class="logo" />DLIBS</h1>
<div class="form-inner">
<h2>Provide the following words:</h2>
<input ng-model="female_name" />
<input ng-model="position" />
<input ng-model="tedious_task" />
<input ng-model="dirty_task" />
<input ng-model="celebrity" />
<input ng-model="female_name" />
<input ng-model="useless_skill" />
</div>
</div>
<div class="display">
<p>{{ female_name }} was a {{ position }}. Although she loved parts of her job,
she absolutely hated {{tedious_task}} and {{dirty_task}}. So, {{female_name}} met
with her life mentor {{celebrity}} who told her to learn how
to {{useless_skill}} at school. Her school didn't offer a
course on {{useless_skill}} so she studied programming instead.
</p>
</div>
<div ng-if="aboutOn" class="about">
<div class="about-main">
<div class="about-close">
<i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>
<h2 class="about-title"><i class="fas fa-info-circle"></i> About</h2>
<p class="about-p">Madlibs is an AngularJS application. When user fill in the words in
the form above, those words will automatically populate the paragraph below.
Try different combinations!
<br />
<br />
This application was made in 2018 by Jack Seabolt. It was constructed using AngularJS.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
There are two problems that give you this issue.
ng-if creates its own scope.
So if you want to reach controller's scope, you need to have ng-click="$parent.aboutOn=false"
FA icons replace DOM (?). You cannot have ng-click on an icon.
Wrap your icon with <div> (as you already do) and put ng-click on it
The code that you need to change, from this:
<div class="about-close">
<i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>
to this:
<div class="about-close" ng-click="$parent.aboutOn=false">
<i class="fas fa-times about-close-icon"></i>
</div>
I need to translate my HTML into different languages based on user preference. For that, I am using Angular JS translate method. The example when I write inside notepad and saved as ".html" is working fine. But when I pasted the same code inside my Salesforce Visualforce page, its behavior changes.ie. When I click on the button"IT" to translate the content to "Italics" the contents are translating to Italics but within seconds the contents are again going back to their preferred language "EN". I have given below my screenshot of output.
I have given below my code, can anyone say what's wrong in this.
<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.2/angular-translate.js"></script>
<script>
// Code goes here
var app = angular.module('app', ['pascalprecht.translate']);
app.config(['$translateProvider',
function($translateProvider) {
$translateProvider.translations('it', {
'Purchase order': "Ordine di acquisto ",
'Number:': "Numero:",
'Customer data': "Dati Cliente",
'Surname / Company':"Cognome/Società ",
'Name':"Nome",
'Piazza way':"Via/Piazza",
'City':"Città ",
'VAT tax code':"Codice Fiscale/Partita IVA",
'Phone':"Telefono",
'E-Mail':"E-Mail",
'CAP':"CAP"
});
$translateProvider.preferredLanguage("en");
}
]);
app.controller('AppController', function ($translate) {
// this.browser = navigator.userAgent;
this.useLang = function (lang) {
$translate.use(lang);
}
});
</script>
<div ng-controller="AppController as app">
<h3 translate> Purchase order </h3>
<p translate>Number:</p>
<h3 translate>Customer data</h3>
<p><span translate>Surname / Company</span>_________</p>
<p> <span translate>Name</span>__________</p>
<p><span translate>Piazza way</span>____________</p>
<p><span translate>CAP</span>_______<span translate>City</span>______</p>
<p><span translate>VAT tax code</span>__________</p>
<p><span translate>Phone</span>____________</p>
<p><span translate>E-Mail</span>_________</p>
<button ng-click="app.useLang('it')">IT</button>
<button ng-click="app.useLang('en')">EN</button>
</div>
</body>
</html>
try this
{{'variable_name' | translate }}
After going through the solutions provided in developer forums, finally I found the solution for my problem. Actually the reason behind my content going back to "english" from "italics" is "page refreshing". To stop the page from refreshing I need to set the <button> type as "button".
ie <button type="button">
Code change
<button type="button" ng-click="app.useLang('it')">IT</button>
<button type="button" ng-click="app.useLang('en')">EN</button>
I did the change in my code and it stopped the page from refreshing, which in turn gave my expected result.
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
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'"