I am a beginner in angularjs and I am sure there must be an easy solution to it but I can't pin it. I am trying to get style for an element through a function, however unsucessfully. Here is the code:
Script.js:
(function(angular) {
'use strict';
angular.module('docsBindExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.color = "{'background-color':'red'}";
$scope.fetchStyle = function(){
return {'background-color':'red'};
};
$scope.name = 'Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)';
}]);
})(window.angular);
Index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example9-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsBindExample">
<div ng-controller="Controller">
Hello <input ng-model='name'> <hr/>
<span ng-bind="name" ng-style="fetchColor()"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
</div>
</body>
</html>
I am using fetchColor() to get the color for the span. Is there some syntax mistake or something else? All responses appreciated.
ng-style needs an expression. Also you are using fetchColor() in markup but have fetchStyle() in controller
Try
<span ng-bind="name" ng-style="{{fetchStyle()}}"></span> <br/>
<span ng:bind="name" ng-style="{{color}}"></span> <br/>
In addition you are creating a string for $scope.color
Change:
$scope.color = "{'background-color':'red'}";
To
$scope.color = {'background-color':'red'};
DEMO
Related
Hi Guys I am an Entry level programmer for angularJS i tried to use ng-show but i dont know why its not been working. I used latest version of Angular js-1.7.9.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index Page</title>
</head>
<body >
<div ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagaph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</div>
<script src="./js/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
</script>
</body>
</html>
I tried to solve by many possibilites but couldn't get on the error. Thanks in Advance.
Fix the typo:
̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶h̶o̶w̶P̶a̶r̶a̶g̶a̶p̶h̶(̶)̶"̶>̶C̶l̶i̶c̶k̶ ̶M̶e̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
<button ng-click="showParagraph()">Click Me</button>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagraph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</body>
I am working on uib-popover recently, I found a problem that I am confused with.
I want to popover a template, in this template I have an input, at first the input have initial value.
I want to update the content real-time based on the input. When I just bind a variable, it does not work, while if I bind an object, it works. I can't figure this problem out.
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<hr/>
<hr/>
<hr/>
<button uib-popover-template="'myPopoverTemplate.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
{{dynamicPopover.title}}
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="form-group">
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
</script>
<button uib-popover-template="'inputContent.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
{{inputContent}}
<script type="text/ng-template" id="inputContent.html">
<div class="form-group">
<input type="text" ng-model="inputContent" class="form-control">
</div>
</script>
</div>
</body>
</html>
example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function($scope, $sce) {
$scope.dynamicPopover = {
title: 'Title'
};
$scope.inputContent = "hello";
});
Here is the plunker example https://plnkr.co/edit/IPXb5tddEPQPPAUrjdYx?p=preview, you could have a try.
You made an interesting point in your second plunk. I didn't catch this the first time but I think it may be because you are doing your popover input in a script tag. I would suggest using a custom directive if you could versus just doing it in an inline script. That way it is kept up to date with angular's digest cycle.
Example Directive:
customPopoverApp.directive('customPopover',['$compile','$templateCache',function($compile,$templateCache){
return {
restrict:'A',
transclude:true,
template:"<span>Click on me to show the popover</span>",
link:function(scope,element,attr){
var contentHtml = $templateCache.get("customPopover.html");
contentHtml=$compile(contentHtml)(scope);
$(element).popover({
trigger:'click',
html:true,
content:contentHtml,
placement:attr.popoverPlace
});
}
};
}]);
And to use it:
<button custom-popover="" popover-place="bottom">click on me to show the popover</button>
{{message}}
<script type="text/ng-template" id="customPopover.html">
<div class="form-group">
<input type="text" ng-model="message" class="form-control">
</div>
</script>
Here is a working plunk. I hope this is what you're looking for
Please look at the following code:
<html lang="en" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="flexbox" >
<div id="wrapper" ng-controller="flex-ctrl as ctrl">
<div id="aside">
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
</div>
</div>
</body>
</html>
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", ['$scope', function($scope) {
$scope.buttons = ['a','b', 'c'];
}]);
I expect to see three <p> items. However, it looks like ng-repeat is ignored and I see an empty page.
Do you know what is the problem?
For your convenience: http://codepen.io/CrazySynthax/pen/yVwWdo
Use this.buttons instead of $scope.buttons since you are using controller as syntax
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", ['$scope', function($scope) {
this.buttons = ['a','b', 'c'];
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-app='flexbox'>
<div id="wrapper" ng-controller="flex-ctrl as ctrl">
<div id="aside">
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
</div>
</div>
</body>
</html>
Since you are using controller as syntax you can change your ctrl like so:
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", [function() {
var vm = this;
vm.buttons = ['a','b', 'c'];
}]);
hope it helps.
Your variable is in $scope, so you can just loop over it with:
<p ng-repeat="item in buttons"> {{item}} </p>
Instead of
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
Forked your Codepen here.
I have created a simple app with simple animations where I can add and remove items to an array (used ng-fx for animations), but I have a problem.
When I try to add new elements, I get ng-repeat duplicate error. I fixed it by adding track by $index, but this time a new error occurs. If I try to remove an element from the list, wrong one is being animated.
Here's my plnkr
http://plnkr.co/edit/hKk9VGHIE1GT2i3P8TtT?p=preview
Here's my code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="angular-animate.min.js"></script>
<script src="ng-fx.js"></script>
</head>
<body ng-app="app">
<div ng-controller="FirstController">
<div ng-repeat="name in names track by $index" class="fx-fade-normal">
{{name}}
<input type="submit" value="Remove" ng-click="remove($index)">
</div>
<input type="text" ng-model="name" />
<input type="submit" value="Add" ng-click="add()">
</div>
<script>
angular.module('app', ['ngAnimate', 'ng-fx']);
angular.module('app').controller('FirstController', ["$scope", function($scope) {
$scope.names = ["first", "second", "third", "fourth"];
$scope.add = function() {
$scope.names.push($scope.name);
};
$scope.remove = function($index) {
$scope.names.splice($index, 1);
};
}]);
</script>
</body>
</html>
It's simple change ng-repeat="name in names track by $index" to ng-repeat="name in names track by $id(name)"
In the following AngularJS code:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js" ></script>
</head>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
}]);
</script>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<script>
function Ctrl($scope) {
$scope.name = 'Whirled';
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="name" ng-focus=""><br>
<input type="text" ng-model="place"><br>
</div>
</div>
</div>
</body>
</html>
I want to set focus on the first input element. There isn't an example of this on angular.org and the code above doesn't work. How do you use ng-focus? Does this directive even exist at all?