I am just wondering is there any better way to approach same kind of logic as below. 4 buttons onclick of it have to send parameters like (english, german, spanish, french) to angular function. Is there any possibility to reduce repetition of code here by using model binding or array or enum??
Even following approach may or may not be the best way to handle it. Since I am not that proficient in angular I am not sure about better alternative approach. Please advice.
Basically is there any way to implement same logic in a better way??
Note: I am using angular 1.7.2 version
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myController', ['$scope', function($scope) {
$scope.Language = 'German';
$scope.Preference = function(lang) {
$scope.Language = lang;
};
}]);
</script>
</head>
<body>
<h2>Attach functions or behavior - AngularJS</h2>
<div ng-app="app" ng-controller="myController">
Click
<button ng-click="Preference('English')">English</button>
<button ng-click="Preference('German')">German</button>
<button ng-click="Preference('Spanish')">Spanish</button>
<button ng-click="Preference('French')">French</button>
<p>I like {{ Language}}</p>
</div>
</body>
</html>
You can use ng-repeat for the buttons and an array for the values. Also you can avoid using function by using ng-click to set the selected value:
<button ng-repeat="lan in vm.languages" ng-click="vm.Preference(lan)">{{lan}}</button>
Check a demo: DEMO
Related
I have a problem with my tooltip.
I have something like this
<span uib-tooltip="{{displayName()}}"></span>
and in js file
function displayName() {
return '<div>' +
name +
'div' +
'<b>something</b>'
}
So I have escape characters and I don't know how to deal with it. Obviously, I would like to display in my tooltip properly code, without
"div" etc.
How can I deal with it? I know that earlier we can use tooltip-html-unsafe, but it's deprecated now.
Parse the HTML as safe using the $sce service and use uib-tooltip-html as specified in the ui-bootstrap docs.
In HTML:
<span uib-tooltip-html="displayName()"></span>
In controller:
app.controller("AppCtrl", function ($scope, $sce) {
$scope.displayName = function () {
return $sce.parseAsHtml('<div>' + name + '</div><b>something</b>');
}
});
I'm not sure if this is what you want, but
You can have a tooltip with a template, which will parse / compile your HTML for you. You would need to use uib-tooltip-template. Here is a demo:
var app = angular.module('myApp', ["ui.bootstrap"]);
app.controller('myCtrl', function($scope) {
$scope.name = "'Any name'";
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<span uib-tooltip-template="'tooltipTemplate.html'" tooltip-placement="bottom">Tooltip with a template</span>
<!-- separate file -->
<script type="text/ng-template" id="tooltipTemplate.html">
<div>
{{name}}
</div>
<b>something else</b>
</script>
</div>
</body>
</html>
Simply installing ngSanitize and including it in your app will allow you to use uib-tooltip-html (rather than uib-tooltip) without worrying about safety.
https://docs.angularjs.org/api/ngSanitize
After installing, you can include it in your app:
var app = angular.module('myApp', [...,'ngSanitize']);
And of course, make sure you include the plugin in your build files. Personally, this allowed me to replace a lot of old unsafe tooltips very easily during upgrades from previous versions.
It works normally, but doesn't work after an ngClick.
Why is this?
How should this be dealt with if you do want it to work after an ngClick?
It actually works in the snippet below, but doesn't work in this Plunker, and also doesn't work in my app.
It also never works more than once in any of the three places, and I don't know why that is.
angular
.module('app', ['ui.bootstrap'])
.controller('MainController', MainController)
;
function MainController() {
var vm = this;
vm.updateSuccess = false;
vm.closeUpdateSuccess = function() {
console.log('closeUpdateSuccess');
vm.updateSuccess = false;
};
vm.submit = function() {
vm.updateSuccess = true;
};
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap#0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js'></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='MainController as vm'>
<alert ng-show='vm.updateSuccess' type='success' close='vm.closeUpdateSuccess()' dismiss-on-timeout='2000'>
Successfully updated!
</alert>
<h1>Test Text</h1>
<button ng-click='vm.submit()'>Submit</button>
</div>
</body>
</html>
The problem is you are not using the alert directive correctly. It is working as designed and you can see this by looking at the console in your browser. When the page is rendered, two seconds later your logging statement is executed. The alert directive doesn't know or care whether or not it is visible. Angular will execute the directive when it is added to the DOM. For ng-show as you are using, it is only ever added once. You could use ng-if to achieve the desired behavior or, as I say below, ng-repeat if you want the ability to display multiple alerts.
Look at our examples here and see how we're using an array to store them and the HTML code to display them via an ng-repeat.
your are using angular-ui but you are trying to execute native javascript function, try to use the angular in your js file.1 So you need to implement it with so that directive could call it,
<alert type="danger" close='closeUpdateSuccess()' ng-if="show"
dismiss-on-timeout="2000">Something happened.</alert>
and in controller:
$scope.show = true;
$scope.closeUpdateSuccess() = function(index) {
$scope.show = false;
};
i m new in angularjs. But there is problem that i cant resolve it my code is below
My index.html file is given below
<!doctype html>
<html ng-app = "myApp">
<head>
<script src=""https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js""></script>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope){
$rootScope.name = "Ari Lerner";
});
</script>
</head>
<body>
<div>
{{name}}
</div>
</body>
</html>
But still the output on Browser in
{{name}}
please help to solve my problem
I think you made this pretty complex for your self. You need to play with the scope of that moment instead of using the rootScope when their is only one level of scope involved.
However in order to make your example work created a fiddle for the same:
Fiddle
Code Snippet:
HTML:
<div ng-app>
<div ng-controller="test">
{{name}}
</div>
</div>
JS:
function test($scope){
$scope.name = "Ari Lerner";
}
Make sure your angularjs is included properly:
Put double quotes only once:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
demo: jsfiddle
I'm teaching myself Angular and I've looked over a number of examples that show how to bind a model to an HTML input so that they always contain the same text.
I understand that Angular also provides the $location service which works with the URL.
I have an application that I'm thinking of partially rewriting in Angular as a learning example.
In my example, I have an HTML input that I keep synced up with a model using jQuery and also synced up with a hash URL.
Is there a simple way of accomplishing this with AngularJS?
Consider the example application bellow:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
function FirstController($scope, $location) {
var data = {
bar: 'hello world'
};
$scope.data = data
}
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstController">
<input ng-model="data.bar" />
<h2>{{ data.bar }}</h2>
</div>
</div>
</body>
</html>
This is a simple example showing how the model can be kept synced with a textbox. I was wondering if it's possible to keep it synced with a hash URL, as well, so that we would have http://www.example.com#bar=What_The_User_Typed
What you probably need is the $routeProvider
https://docs.angularjs.org/tutorial/step_07
I have got two separate divs as shown in the code below. What I am trying to do is update the Controller from first div and then detect the changes in the second div using the same controller. When I press the button, 'i am here' gets printed on the console but the data in 2nd div won't update. It should change to "clicked".
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<h1>Divs below should not be nested</h1>
<div id="notNested1" ng-controller="Controller1">
<button ng-click="buttonClick()">Click me</button>
</div>
<div id="notNested2" ng-controller="Controller1">
<p>{{paragraph}}</p>
</div>
<script type="text/javascript" src="libs/angular/angular.js"></script>
<script>
var app = angular.module('app', []);
function Controller1($scope) {
$scope.paragraph = 'initial';
$scope.buttonClick = function () {
console.log('i am here');
$scope.paragraph = "clicked";
};
}
</script>
</body>
</html>
How can I fix this problem? Also what is the problem here? Is it because the $scope is different for both divs?
Thanks
You should probably share the data using a service/factory.
You could also create a parent controller with the data there, and reference it from the child controllers, but a shared service seems better.
Yes you have 2 separate scopes, so they do not interact with each other.