Please find the plunker code
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.levels = [{LevelId:0,LevelName: "Level 1"}, {LevelId:1,LevelName: "Level 2" }];
$scope.updateLevel = function() {
console.log("Fired on change");
$scope.result="Data Changed";
}
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<label for="textbox3">Select Level</label>
<select id="LevelSelect" class="form-control" ng-Change="updateLevel()" ng-model="selectedLevel" ng-options="lvl as level.LevelName for level in levels"></select>
<p>{{result}}</p>
</body>
</html>
I referred to the various SO questions like on not calling the declared method and onchange not working. Advice.
The way you use ng-options is incorrect there for the rendered options values is getting undefined:undefined for all the options check below image, and when you change the selected item its not trigger ng-change event because all the values are same.
so change it to,
ng-options="level as level.LevelName for level in levels"
please refer this angular DOC
UPDATED PLUNKER
Related
I'm very new to Angular.js.
I'm grabbing images from a MySQL database and printing them to the screen like this:
while ($row = mysqli_fetch_array($result)){
echo "<div id='img_div' ng-click='popup()'>";
On the echoed div, I have an ng-click. In app.js, this is currently what I have for the ng-click (purely for testing purposes:
$scope.popup = function() {
// assign a message to the $scope
$scope.message = 'Hello World!';
// use the $log service to output the message in a console
$log.log($scope.message);
};
What I'd actually like to have in that ng-click function is:
modal.style.display = "block";
I'd basically like to set the CSS of another element.
Will I need to apply ng-style in order to do this?
Using ng-style with a $scope variable you can control the display property (or any for that matter):
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.display = 'inline';
$scope.setDisplayValue = function(value){
$scope.display = value;
}
});
div#test {
background: red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="test" ng-style="{'display' : display}">{{display}}</div>
<hr />
<button ng-click="setDisplayValue('inline')">Set Display to inline</button>
<button ng-click="setDisplayValue('block')">Set Display to block</button>
</body>
</html>
Plunker mirror: http://plnkr.co/edit/4vR4SEnz7iX81CWIrShw
I have my DOM element as :
<i id= class="icon clr-org fleft ion-bookmark" ng-class="{business.class : setFavouriteBusinessIcon(business.ID, $index)}"></i>
now I want to apply business.class which is a variable in my scope as the element's class whenever setFavouriteBusinessIcon(business.ID, $index) returns true.
but the current ng-class condition is not working.
You can do so by having single quotes and {{...}} around it. Like this:
<i ng-class="{'{{business.class}}' : setFavouriteBusinessIcon(business.ID, $index)}"></i>
Here's a working example: (notice that world class has been applied and so is its CSS)
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'world';
});
.world {
background-color: red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>
<body ng-controller="MainCtrl">
<p ng-class="{'{{name}}': true}">Hello {{name}}!</p>
</body>
</html>
I am accessing my selected file using a directive as suggested by some SO answers,and i am able to console my file name in the directive.Now i want to bind that name to html from that directive.....how can i do that??
See the p tag after input
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="file" myfilename />
<P>{{files[0].name}}</p>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
app.directive('myfilename', [function () {
return {
link: function (scope, element, attrs) {
element.on('change', function (evt) {
scope.files = evt.target.files;
console.log(scope.files[0].name);
});
}
};
}]);
</script>
</html>
Just add scope.$apply() after scope.files = evt.target.files; in direcives.
The reason why it does not show the updated value immediately is because the 2 way binding updates the parent (or the consumer scope of the directive) scope's bound value only during the digest cycle. Digest cycle happens after the ng-click is triggered. And hence $scope.files in the controller is not yet updated. You can get around this in many ways by using a timeout which will defer the action to run at the end of the digest cycle. You could also do it by setting an object which holds the value as 2-way bound property. Since 2-way bound property and parent scope share the same object reference you will see the change immediately.
Here is the full code
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="file" myfilename />
<P>{{files[0].name}}</p>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
app.directive('myfilename', [function () {
return {
link: function (scope, element, attrs) {
element.on('change', function (evt) {
scope.files = evt.target.files;
scope.$apply();
console.log(scope.files[0].name);
});
}
};
}]);
</script>
</html>
I know I can set html src tag like <img ng-src="{{phone.imageUrl}}">. But how can I set an id tag like <span id="sourceId::{{post.id}}" class="count"></span> ?
I tried <span id="{{ 'sourceId::'post.id }}" class="count"></span> but it didn't work.
It worked for me.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<span id="{{name}}" class="count">Jeinsh</span>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
here is working plunk => link
Inspect the element in developer tool on span and you will get updated id there.
As #karaxuna said, the following should work
id="sourceId::{{post.id}}"
Or doing the string concatenation inside the {{}} with a +
id="{{'sourceId::' + post.id}}"
I have a template in which I have rows, and there are two elements in each row and each element has different classes so I have my Html structure like so (simplified)
<div ng-repeat "row in deals">
<div class="deal-title-left">{{row[0].title}}</div>
<div class="deal-title-right">{{row[1].title}}</div>
</div>
I would like to add a search box feature that will use live search to go through the deal titles. I have tried using the ng-model="search" and adding a search filter into the row div, but how do I apply the model to each individual deal instead of the entire row?
Demo :http://plnkr.co/edit/zGYLPcPHTr1TOSZTIBI2?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js" data-require="angular.js#1.2.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search"/>
<div ng-repeat="row in deals | filter :{title:search}">
<div class="deal-title-left">{{row.title}}</div>
</div>
</body>
</html>
JS:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.deals = [{
title: "Cola for free"
}, {
title: "Icecream for free"
}, {
title: "Tee for free"
},
]
});