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>
Related
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>
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>
I am trying to pass two regex variable regex1 and regex2 for email and mobile number into single ng-pattern by using "OR" condition but it is not working. if i pass a single variable at a time then it works perfectly. So what i have to do to pass two variable at a time into single ng-pattern directive.
please suggest solution..
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Form Validate</title>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<form name="frm">
<input type="text" name="udetail" ng-model="user.udetail" placeholder="Enter email or phone number" ng-pattern="regex1 || regex2" required>
<span ng-show="frm.udetail.$dirty && frm.udetail.$error.required">required</span><br>
</form>
</div>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.regex1 = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$scope.regex2 = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
});
</script>
</body>
</html>
What you can do is create a function in which you can taken both regex and based on these regex return true and false and from ng-pattern call that function
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head>
<meta charset="utf-8">
<title>Form Validate</title>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
</style> </head> <body> <div ng-controller="myCtrl"> <form name="frm">
<input type="text" name="udetail" ng-model="user.udetail" placeholder="Enter email or phone number" ng-pattern="regex1 || regex2" required>
<span ng-show="frm.udetail.$dirty && frm.udetail.$error.required">required</span><br>
</form> </div> <script src="https://code.angularjs.org/1.2.3/angular.min.js"></script> <script>
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) {
$scope.regex1 = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$scope.regex2 = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/; });
$scope.runBothRegex = (function(){
return {
var value = $scope.user.udetail;
if(regex1.test(value) || regex2.test(value)){
return true;
}
return false;
}
})();
</script> </body> </html>
How can I create dynamic ng-models in Angular? I tried but I think I'm having a hard time getting it to run. All I get is undefined. Here's my code.
<input type="text" class="form-control input-sm" ng model="teller[value.teller_id]" value="<% value.mac_address %>">
I am planning to have a ng-model that has the same name but only changes by number. I have an object that holds the number from 1-4. which is value.teller_id. I want to append it to the ng-model as teller1,teller2,teller3 (teller[value.teller_id] etc.. It is looped by ng-repeat which I don't have any problem but rather creating the dynamic ng-model and changing the number will yield undefine.
ng model="teller[value.teller_id]" <---- doesn't work
I want to achive teller1, teller2 etc..
Thanks!
Yes. We can generate ng-model name dynamically.
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.teller = {};
$scope.name = [{
"id":1
},{
"id":2
}]
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="x in name">
<input type="text" ng-model="teller[x.id]" />
</div>
<pre>{{teller | json}}</pre>
</body>
</html>
Hope it works for your case :)
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