Hi I am a newbie to angular js and I am hoping someone can help me out with the following problem.
I have a numeric field called numAdults and I need to show a set of field (such as name, address, telephone etc ) numAdult times to get those information for each of those person.
Here is the jsfiddle for the problem jsfiddle link
Here is also an overview of code of the controller
function bookingController($scope){
$scope.numAdults = 1;
$scope.personLoop = function(){
console.log('personLoop called')
return new Array($scope.numAdults);
//return new Array(2);
}
the html
<label for="book_num_adults">Number of adults:</label>
<input id="book_num_adults" type="text" ng-model="numAdults">
<div class="row" ng-repeat="t in personLoop()" style="border:2px solid red;margin-top:10px">
<h4>Person {{$index+1}}</h4>
<input placeholder="name"><br>
<input placeholder="address"><br>
<input placeholder="telephone"><br>
</div>
Can you also help me with how to transform this as an module ( not just a controller based )
Thank you in advance!
Your Fiddle was riddled with errors...
http://jsfiddle.net/bRgTR/5/
Under Frameworks & Extensions, you need to change the 2nd dropdown from "onLoad" to one of the "No wrap" options
Your controller definition is mangled. It's supposed to be: .controller('name', ['depname', function (depname) { })]); -- you had your closing array misplaced.
You should really use semi-colons.
You don't create an array of 5 items in JavaScript like this: var a = new Array(5), that creates an array that contains a 5. Instead, you should do var a = []; a.length = 5;
Related
I have an tag input like this
<div class="form-group col-md-3">
<label class="lb">Valor total</label>
<input type="number" ng-model="subTotalProduto"
ng-keyup="calculaValorProdutos()"
id="idValorTotalProdutoP"
class="form-control " />
</div>
and i need to put a limit like maxlength="15,4"
being much more specific i need this in my input 999999999999999,9999 or something like this mask ###############,####
i iv tried to look at web but all sugest dosent work in my case.. i dont now why.. so i ask here..
its can be in angular, jquery
Try something like this:
ng-pattern="/^\d{1,15}(\.\d{1,4})?$/"
It should work as a simple regular expression for testing if your input matches some specific pattern.
You can test it here
And here is also a working Plunker
seems a bit strange but this solution solved my question
$(function() {
$('#idValorTotalProdutoP, #idValorUnitarioProduto, #idProdutoQuantidade, #idValorIcmsNota,#idValorFreteNota, #idValorSeguroNota, #idValorTotalP, #idFunruralNota, #idValorTotalNotaProdutor, #idAlicotaIcmProduto, #idBaseCalculoProduto').on('change keyup input', function() {
match = (/(\d{0,15})[^.]*((?:\.\d{0,4})?)/g).exec(this.value.replace(/[^\d.]/g, ''));
this.value = match[1] + match[2];
});
});
http://codepen.io/BltzLcht/pen/grBGBB
<h5>Set timer:</h5></span> <input class="time" type="number" ng-model="countdown" placeholder="In Mississippis" ng-change="selectTimer()"/>
I thought that putting {{countdown}} in would work but it doesn't.
Not sure how to bind the task name with the popup either.
The ionic js file doesn't exist on codepen you need to link it from cdn, for instance:
<script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
instead of:
<script src="lib/ionic/js/ionic.bundle.js"></script>
Edit:
The task name problem:
In your html view you use ionic directives which change the scope, so your ng-model input saves to the new scope. The easiest way to do that will be:
$scope.countDown = 0; // number of seconds remaining
$scope.taskData = {}; // <-- add this line to declare object
In html change:
<input class="row-center" type="text" ng-model="taskData.Task" placeholder="Task to be done" />
ng-model Task is inside declared taskData object
and in ionicPopup:
title: 'Your ' + $scope.taskData.Task + ' Is Up!',
Setting task time
You should do something similiar (but add new variable, for instance $scope.taskData.countdownTime which will be used only to set the time, no to countdown)
Change in html:
<input class="time" type="number" ng-model="taskData.countdownTime" placeholder="In Mississippis" ng-change="selectTimer()"/>
Then in JS instead of setting 10 in line:
$scope.countDown = 10;
set the number of seconds provided by user:
$scope.countDown = $scope.taskData.countdownTime;
(Updated code)
Hi all i want to filtering items for count and quality using the filter functionality in meanjs app. then i tried many ways but unable to get the solution if any one knows the solution please help me.....
here is my plunker sample
Count All
<div class="col-md-2 form-group form-group-default">
<label>Quality</label> <select data-ng-model="searchtable.quality" id="quality" ng-options="item.quantity as item.quantity for item in descriptionyarnqualitys" class="form-control" placeholder="Quality"required><option value="">All</option></select>
</div>
The quality property is a sub property of colorshades and not of the order itself. Use searchtable.colorshades.quality model name and it works
dynamically extract the 'quality' value from the order list:
$scope.getDescriptionyarnqualitys = function() {
var qualities = {};
angular.forEach($scope.sryarnorders, function(order) {
angular.forEach(order.colorshades, function(shade) {
qualities[shade.quality]=shade.quality;
});
})
return qualities;
};
In the HTML you can call the function to extract the available qualities:
<select data-ng-model="searchtable.colorshades.quality" id="quality" ng-options="name for (name, value) in getDescriptionyarnqualitys()" class="form-control" placeholder="Quality" required>
Hope this help.
I have a simple issue with AngularJS: the properties outside of the array update normally, but the array elements (that are bound to those properties) don't, here is a plunker to show that: http://plnkr.co/edit/gNtGhiTf228G8rP0O2iB?p=preview
var vm = this;
vm.topLine = {
netWrittenPremiumLastFye: 1000000,
netWrittenPremiumYtd: 123000
}
vm.grossColumnChartData = [
['Previous YE', vm.topLine.netWrittenPremiumLastFye],
['YTD', vm.topLine.netWrittenPremiumYtd]
];
We can use $scope.$watch('something', function(oldValue, newValue) {...}) but that's not a good choice in my situation since i'll have to do that many times, repeatedly.
I want to take advantage of angular 2-way binding as explained above.
Any helps or suggestions are appreciated, thanks!
I think the only way you can do this without using $watch is by updating the array directly in the html binding.
{{ grossColumnChartData = [
['Previous YE', vm.topLine.netWrittenPremiumLastFye],
['YTD', vm.topLine.netWrittenPremiumYtd]
] }}
<br/>
grossColumnChartData = {{grossColumnChartData | json}}
See this:
http://plnkr.co/edit/uthXcvoWSV2XNRFJzkck?p=preview
I have updated my plnkr and i have my answer now: http://plnkr.co/edit/gNtGhiTf228G8rP0O2iB?p=preview
<div ng-repeat="item in vm.grossColumnChartData">
<label>Input {{$index+1}}:</label>
<input ng-model="item.data" type="text"/>
</div>
I was confused between data binding and reference.
I used ng-repeat to update the array elements.
I had asked a question about
How to associate objects as models using ng-options in angularjs.
And I got an awesome answer very fast. My followup questions is that the response uses <select mutiple> to handle the child object array.
You can see a working example of what I want, working with <select> at http://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview
How can I use <input type='checkbox'> (instead of <select>) to handle that object array i.e. ng:model="shirt.colors" while repeating the items from colors object array.
The reason, this appears so complicated to me is that I have to manage an array of objects instead of array of values... for example, if you look in the fiddle, there are color objects and shirt object that has multiple colors.
If the color object changes, it should change the corresponding color objects in shirt objects.
Thank you in advance.
You just need some intermediate value in your scope, and bind checkboxes to it. In your controller - watch for it changes, and manually reconstruct shirt.colors, according to it value.
<div ng-repeat='shirt in shirts'>
<h3>Shirt.</h3>
<label>Size: <input ng-model='shirt.size'></label><br/>
<label>Colors:</label>
<label ng-repeat="color in colors">
{{color.label}} <input ng-model="selection[$parent.$index][$index]" type="checkbox"/>
</label>
</label>
</div>
And in your controller:
$scope.selection = [[],[]];
$scope.$watch('selection', function () {
console.log('change', $scope.selection);
angular.forEach($scope.selection, function (shirtSelection, index) {
$scope.shirts[index].colors = [];
angular.forEach(shirtSelection, function (value, index2) {
if (value) $scope.shirts[index].colors.push($scope.colors[index2]);
});
});
}, true);
You can test it here: http://plnkr.co/edit/lh9hTa9wM5fkh3nT09RJ?p=preview