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 :)
Related
I have the following code in place
<input class="fill" name="keywords" ng-model="textbook.keywords"
type="text" ng-list="," ng-required="true"></input>
where textbook.keywords is an array of strings.
I expect the above code to create a text box filled with comma separated values of the array, textbook.keywords. Instead, the textbox is empty. I made sure textbook.keywords has values in it by debugging.
First: Please check whether the library properly added in index.html.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Second: Please check whether the ng-app is added properly in HTML:
<html ng-app="listApp">
Third: Please check whether the ng-controller is added properly in HTML:
<body ng-controller="ListCtrl">
Forth: The app.js should should contain the following minimum code:
var app = angular.module('listApp', []);
app.controller('ListCtrl', function($scope) {
$scope.textbook = {
keywords: ['Text1', 'Text2', 'Text3']
};
});
Fifth: Don't forget to add app.js in index.html
<script src="app.js"></script>
Final: The working code snippet is added here:
var app = angular.module('listApp', []);
app.controller('ListCtrl', function($scope) {
$scope.textbook = {
keywords: ['Text1', 'Text2', 'Text3']
};
});
<html ng-app="listApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ListCtrl">
<input class="fill" name="keywords" ng-model="textbook.keywords"
type="text" ng-list="," ng-required="true">
</body>
</html>
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>
Is there any way for Angular to take the string from the date/time inputs? Currently, I have this input, for example:
<input class="admin-input" type="time" ng-model="newEvent.endHour"/>
I'd like to show the value in model as HH:mm but, when I print its value, it shows the full date plus the full time. Is there anyway to get just the string shown in the input (HH:mm format) into the ng-model?
Thanks in advance.
You can use the angular date filter,
<input class="admin-input" type="time" ng-model="newEvent.endHour | date:'HH:mm'"/>
EDIT
If you want to bind it to a model then add a watch and filter it inside the controller,
DEMO
var app = angular.module('App', []);
app.controller('myctrl', function($scope,$filter) {
$scope.endHour = new Date();
$scope.$watch('endHour', function(newValue) {
$scope.endHour = $filter('date')(newValue, 'HH:mm');
});
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="//code.angularjs.org/1.2.14/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div ng-app="App" ng-controller="myctrl">
<input type="datetime" ng-model="endHour" class="form-control" />
</div>
</body>
</html>
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)"
I have a simple form.
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="field" name="myField" />
<div ng-show="myForm.myField.$error" style="color: red">
{{myForm.myField.$error}}
</div>
</form>
<script src="bower_components/angular/angular.js"></script>
<script src="controller.js"></script>
</body>
</html>
And i have angular controller
angular.module('MyApp',[])
.controller('AppCtrl', function($scope) {
$scope.myForm.myField.$error = "just to see it work";
});
Why do I get error '$scope.myForm is undefined'?
You have model, module and controller a little confused. My solutions uses Angular 1.2, although you will soon need to move to Angular 2.
Here is my reworking of your example:
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl as ctrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="ctrl.myField" name="myField" />
<div style="color: red">
{{ctrl.myField}}
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">
</script>
<script src="controller.js"></script>
</body>
</html>
And in the controller.js:
angular.module('MyApp',[])
.controller('AppCtrl', [function() {
this.myField = "just to see it work";
}]);
In the above, I have put "myField" in the scope of the controller "AppCtrl". I have put the whole page under the control of the module 'MyApp'. You can either inject the model with "ng-bind" or use the curly bracket notation in the body of the div to bind to the "myField" model of "ctrl". I have used the latter but be aware this binding will be established after the page has been parsed.
If you load this all now, you should see "just see it work" in red under the text field, and also inside the text field. When you edit the text box, the red text will change in sync. Once you have that working, you will never want to stop learning more about Angular!
I should add that this model has a single attribute. To generalise this you will need to create a model with several properties (one for each input element), so that a JSON object is returned when the form is submitted.
You can't have dots in your variable name.
Try myFormMyFieldError instead of myForm.myField.$error.
Additional: Rather than using the attribute style, use a CSS file.