I am new to Angular.js. I am testing dynamic population of ng-hide attribute. Selecting false should make the text visible. But it's not working. Please help!
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select an Option</p>
<select ng-model="selectedVal" ng-options="x for x in option" >
</select>
<p ng-hide= "{{selectedVal}}" >I am visible.</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.option = ["True", "False"];
});
</script>
</body>
</html>
Use ng-hide= "selectedVal", not ng-hide= "{{selectedVal}}", you don't need to interpolate it with {{}}. Also change your array of strings ["True", "False"] to boolean [true,false]
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select an Option</p>
<select ng-model="selectedVal" ng-options="x for x in option" >
</select>
<p ng-hide= "selectedVal" >I am visible.</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.option = [true, false];
});
</script>
</body>
</html>
Related
I am trying to substitute, the drop down options "Yes/No" to true and false so that I can make usage of ng-hide to make the appearance of an input field dynamic. But the binding is not working as desired. Please check the JS bin link https://jsbin.com/piteqoduba/1/edit?html,output and advise.
<div ng-app="myApp" ng-controller="myCtrl">
<p>Delivery to same address?</p>
<ng-int="selectedVal={range.value}"></ng-int>
<select ng-model="selectedVal" ng-options="range.display for range in range" >
</select>
<p ng-hide= "selectedVal" >Fill your address below.</p>
<input type="text" ng-hide = "selectedVal">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.range = [{display: "yes", value:true},
{display: "no", value: false}
];
});
</script>
Substitute
ng-options="range.display for range in range"
with
ng-options="range.value as range.display for range in range"
This will display Yes/No in dropdown while the values will be true/false.
You will get an object in model so you have to do something like
<input type="text" ng-hide = "selectedVal.value">
Here is working fiddle
Try this. Actually you are using selected object for ng-hide="selectedVal". selectedVal is Object. That's a problem. You want true or false. So ng-hide="selectedVal.value" is correct.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Delivery to same address?</p>
<ng-int="selectedVal={range.value}"></ng-int>
<select ng-model="selectedVal" ng-options="range.display for range in range" >
</select><p>{{selectedVal}}</p>
<p ng-hide="selectedVal.value" >Fill your address below.</p>
<input type="text" ng-hide="selectedVal.value">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.range = [{display: "yes", value:true},
{display: "no", value: false}
];
});
</script>
</body>
</html>
Here's my code, however ng-change is never called. Does anyone know why ? Thanks
<html ng-app="">
<head>
</head>
<body data-ng-init="names=['A', 'B', 'C']">
<script src="resources/js/angular/angular.min.js"></script>
<script src="resources/js/angular/angular.min.js.map"></script>
<select class="form-control input-sm"
ng-model="fda"
ng-change="alert('changed')"
ng-options= "value for value in names" >
</select>
</body>
</html>
You need to have a controller and a corresponding function inside of it,
app.controller("myCtrl", function($scope) {
$scope.alert = function (){
alert("changed");
}
});
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.alert = function (){
alert("changed");
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
<select class="form-control input-sm" ng-model="fda" ng-change="alert('changed')" ng-options="value for value in names">
</select>
</div>
</body>
</html>
Just add this line in your controller $scope.alert = alert.bind(window);
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.alert = alert.bind(window);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
<select class="form-control input-sm" ng-model="fda" ng-change="alert('changed')" ng-options="value for value in names">
</select>
</div>
</body>
</html>
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.
Question :The following ng-option code is not working i not able to identify error
Code:
<html>
<head>
<title>
This is example of ng-option
</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var ngOption = angular.module("ngOptionApp",[]);
ngOption.controller("ngOptionController",function($scope){
$scope.data = ["Maharashtra","Panjab","Rajsathan","Gujrat","Karnatakka","Kerala"];
});
</script>
</head>
<body ng-app = "ngOptionApp" ng-controller = "ngOptionController">
<select ng-model = "xyz" ng-option = "x for x in data">
</select>
</body>
</html>
ng-option should be ng-options
<html>
<head>
<title>
This is example of ng-option
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var ngOption = angular.module("ngOptionApp", []);
ngOption.controller("ngOptionController", function($scope) {
$scope.data = ["Tamil Nadu","Maharashtra", "Panjab", "Rajsathan", "Gujrat", "Karnatakka", "Kerala"];
});
</script>
</head>
<body ng-app="ngOptionApp" ng-controller="ngOptionController">
<select ng-model="xyz" ng-options="x for x in data">
</select>
</body>
</html>
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?