I have two input boxes: length and breadth.
The area is calculated is l*b and based on this I am calculating the result. My result that is Area to be treated:= (sum +(sum *0.05)).
It's working fine, but the problem is when I am entering area manually without length and breadth, I am getting different result. Both result must be same, even if I enter the area manually.
eg, if I enter the area as 1, the output is 10.05.
If I enter the length as 1 and breadth 1, the area is 1 so the output is 1.05 which is correct.
I need 1.05 whether I enter the length and breadth or just the area alone.
var app = angular.module('Calc', []);
app.controller('Calc_Ctrl', function ($scope) {
/* Start constants declaration*/
$scope.constant = {coeff : "0.003"};
/*End constants declaration*/
/*Start user input values and Function to add/remove input fields*/
$scope.choices = [{id : 'choice1', l2 : 0, b2 : 0}];
$scope.addNewChoice = function () {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({'id' : 'choice' + newItemNo, l2 : 0, b2 : 0});
};
$scope.removeChoice = function () {
var lastItem = $scope.choices.length - 1;
if (lastItem !== 0) {
$scope.choices.splice(lastItem);
}
};
$scope.sum = function () {
var sum = 0;
angular.forEach($scope.choices, function (choice) {
sum += choice.l2 * choice.b2;
});
return sum;
}
$scope.Getarea = function () {
$scope.total = document.getElementById("total").value;
//totalsum =$scope.total;
//alert(totalsum);
};
$scope.$watch($scope.sum, function (value) {
$scope.total = value;
});
/*End user input values and Function to add/remove input fields*/
});
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src ="area.js"></script>
<script type="text/javascript"></script>
<div class = "col-lg-8 col-md-7 col-sm-7 col-xs-12 center-output " ng-app="Calc" ng-controller="Calc_Ctrl" >
<h3 class="text-red bottom-line-thick">Antitermite treatment Calculator</h3>
<div class="col-md-12 col-sm-12 col-xs-12 step-2">
<div class="heading"><b>Step: 2</b> - Enter your <b>Requirement</b></div>
<!--Start Input calculation-->
<div data-ng-repeat="choice in choices" class="col-md-12 col-sm-12 col-xs-12 bottom-line">
<button type="button" class="btn btn-default pull-right btn-red" aria-label="Left Align" ng-show="$last" ng-click="removeChoice()">
<span class="glyphicon glyphicon-minus" aria-hidden="true" ></span>
</button>
<button type="button" class="btn btn-default pull-right btn-right-gap btn-red" aria-label="Left Align" ng-click="addNewChoice()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</h4>
<div class="walls">
<div class="form-group col-md-4 col-sm-6 col-xs-6">
<label for="length">Length ({{data.selectedOption.name}}):</label>
<input type="number" class="form-control text-red bold" id="length" ng-model="choice.l2">
</div>
<div class="form-group col-md-4 col-sm-6 col-xs-6">
<label for="breadth">Breadth ({{data.selectedOption.name}}):</label>
<input type="number" class="form-control text-red bold" id="breadth" ng-model="choice.b2">
</div>
<div class="form-group col-md-4 col-sm-6 col-xs-6">
<label for="area">Area (sq {{data.selectedOption.name}}):</label>
<input type="number" class="form-control text-red bold" id="total" placeholder="Area" ng-model="total" ng-change="Getarea()">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 step-result bottom-gap">
<div class="heading"><b>Step: 3</b> - Material <b>Required</b></div>
<div class="col-md-12 ">
<div class="col-md-4 col-sm-4 col-xs-4">
<p class="bold">Area to be treated:</p>
<h1>{{(total + (total * 0.05))|number:2}}<span class="small-text"> (sq {{data.selectedOption.name}}):</span></h1>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<p class="bold">ATT Chemical</p>
<h1>{{((total + (total* 0.05)) * constant.coeff) |number:2}}<span class="small-text">ltrs</span></h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you type in ng-model=total it will actually be treated a string. You could use input type=number perhaps, or you can just cast it to a number when you set the total:
$scope.Getarea = function () {
// numeric cast
$scope.total = +document.getElementById("total").value;
}
Since you already have ng-model you don't need the ng-change at all and you and use input type=number to have it work as a number or you can cast it where you actually use it.
{{((+total + (total* 0.05)) * constant.coeff) |number:2}}
Related
I am trying to pass each scope.selectedLiability based on selection into popup modal from recordRecommendedLiabilityCash directive into detailViewRecommendedLiabilityCash directive on each click.
Here are the core function in recordRecommendedLiabilityCash.
scope.openDetailView = function (id) {
// console.log(scope.recommendedLiabilities[id]);
scope.selectedLiability = scope.recommendedLiabilities[id];
console.log(scope.selectedLiability);
if (!scope.detailViewFlag) {
scope.detailViewFlag = true;
}
};
Up to here everything is okay. In each click console.log(scope.selectedLiability); shows respective selected data. Now, I am trying to pass scope.selectedLiability into nested directive detailViewRecommendedLiabilityCash. However, only first or 0 index value popups in every click.
Picture for index 0
Picture for index 2
If you look carefully on images, we can see both data are same in both clicks. However, I need respective selected data in corresponding click.
Sorry for messed up code. This is not my own code. I am trying help my friend. I stuck here.
//recordRecommendedLiabilityCash directive
.directive('recordRecommendedLiabilityCash', function () {
return {
restrict: 'E',
templateUrl: 'cash/savings-liabilities/recommended-liability-accounts/record-recommended-liability.html',
scope: {
rlc: '=',
liabilities: '=',
listOfLumpSumSource: '=listOfLumpSumSource',
id: '=',
recommendedLiabilities: '='
},
link: function (scope, element, attrs) {
scope.detailViewFlag = false;
scope.removeRecommendedLiabilityRecordCash = function () {
if (scope.rlc.active) {
scope.rlc.active = false;
}
// To-Do: Refactor into reusable function
for (var i = 0; i < scope.liabilities.length; i++) {
if (scope.rlc.legacyId === scope.liabilities[i].id) {
if (!scope.liabilities[i].active) {
scope.liabilities[i].active = true;
}
}
}
};
scope.openDetailView = function (id) {
// console.log(scope.recommendedLiabilities[id]);
scope.selectedLiability = scope.recommendedLiabilities[id];
console.log(scope.selectedLiability);
if (!scope.detailViewFlag) {
scope.detailViewFlag = true;
}
};
}
};
})
//detailViewRecommendedLiabilityCash directive
.directive('detailViewRecommendedLiabilityCash', function () {
return {
restrict: 'E',
templateUrl: 'cash/savings-liabilities/recommended-liability-accounts/detail-view-recommended-liability.html',
scope: {
rlc: '=',
listOfLumpSumSource: '=listOfLumpSumSource',
detailViewFlag: '=',
recommendedLiabilities: '=',
id: '=id',
selectedLiability: '=selectedLiability'
},
link: function (scope, element, attrs) {
console.log(scope.selectedLiability);
scope.rlc.payment_amount = '';
scope.rlc.due_amount = scope.rlc.remainingBalance;
console.log(scope.listOfLumpSumSource);
scope.selectedLumpSumSource = null;
console.log(scope.selectedLumpSumSource);
console.log(scope.recommendedLiabilities, scope.id);
scope.lumpSumDataSource = [
{
"companyName": "FCB",
"productName": "Product1"
},
{
"companyName": "First Command",
"productName": "Product2"
},
{
"companyName": "Second Command",
"productName": "Product3"
}
];
//scope.lumpSumSource = scope.rlc.lumpSumSource;
console.log(scope.rlc.lumpSumSource);
//scope.lumpSumDataSource.push(scope.rlc.lumpSumSource);
// Intialize default variables
var defaultLumpSumObject = {'lumpSumSource': '', 'lumpSumAmount': '', 'remainingBalance': ''};
scope.lumpSumArray = [defaultLumpSumObject];
scope.exisitingAccountObj = {
monthlyPayment: scope.rlc.monthlyPayment
};
// Function to add lumpsum source
scope.addSource = function() {
scope.lumpSumArray.push(defaultLumpSumObject);
};
// Function to delete lumpsum source
scope.deleteSource = function(index) {
scope.lumpSumArray.splice(index,1);
};
scope.closeDetailView = function () {
if (scope.detailViewFlag) {
scope.detailViewFlag = false;
}
};
// When the user clicks anywhere outside of the modal, close it
element.on('click', function (e) {
var target = $(e.target);
if (!target.closest('.modal-content').length) {
scope.$evalAsync(scope.closeDetailView());
}
});
scope.saveRecommendedLiabilityAccount = function () {
scope.rlc.remainingBalance = scope.rlc.remainingBalance - scope.rlc.payment_amount;
scope.rlc.lumpSumAmount = scope.rlc.lumpSumAmount - scope.rlc.payment_amount;
console.log(scope.rlc.lumpSumAmount);
};
}
};
});
<!--recordRecommendedLiabilityCash template -->
<div class="Table-row">
<div class="Table-row-item" data-header="Company">
<a class="edit-view" ng-click="openDetailView(id)" data-toggle="modal" data-target="#{{'modal-detail-view-cash-rec-liability-' + rlc.id}}">{{ rlc.companyName }}</a>
</div>
<div>{{selectedLiability}}</div>
<div class="Table-row-item" data-header="Product">{{ rlc.productName }}{{rlc.id}}{{id}}</div>
<div class="Table-row-item" data-header="Liability Type">{{ rlc.liabilityType }}</div>
<div class="Table-row-item" data-header="Owner">{{ rlc.owner }}</div>
<div class="Table-row-item" data-header="Loan Balance">{{ rlc.remainingBalance | currency:"$":0 }}</div>
<!-- <div class="Table-row-item" data-header="Lump Sum">{{ rlc.LibtyLumpSumFundBal | currency:"$":0 }}</div>-->
<div class="Table-row-item" data-header="Monthly">{{ rlc.monthlyPayment | currency:"$":2 }}</div>
<div class="Table-row-item custom-select" data-header="Action">
<select id="action" name="action">
<option value="">I Want To …</option>
<option value="Retain">Retain</option>
<option value="Consolidate">Consolidate</option>
<option value="Pay-Off">Pay-Off</option>
<option value="Pay-Down">Pay-Down</option>
</select>
<div class="select__arrow"></div>
</div>
<!-- <div class="Table-row-item status" data-header="Status">
<div>{{ rlc.status }}</div>
<a class="close-button" ng-click="removeRecommendedLiabilityRecordCash()"></a>
</div>-->
</div>
<detail-view-recommended-liability-cash rlc="rlc" selected-liability="selectedLiability" recommended-liabilities="recommendedLiabilities" id="id" list-of-lump-sum-source="listOfLumpSumSource" detail-view-flag="detailViewFlag"></detail-view-recommended-liability-cash>
<!-- template for details view recommended liability-cash -->
<div class="modal fade" role="dialog" id="{{'modal-detail-view-cash-rec-liability-' + rlc.id}}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="close" data-dismiss="modal">×</span>
<h4>Savings - Liabilities <label class="pull-right">{{ rlc.remainingBalance }}</label></h4>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<label class="header-sub-label">Owner: <span>{{ rlc.owner }}</span></label>
<label class="header-sub-label pull-right">Loan Balance</label>
</div>
</div>
</div>
<form name="recommendedLiabilityForm" novalidate >
<div class="modal-body">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Company</label>
<label class="control-value">{{ selectedLiability.companyName }}</label>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Product</label>
<label class="control-value">{{ selectedLiability.productName }}</label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<label class="control-label">Description</label>
<label class="control-value">{{ selectedLiability.description }}</label>
</div>
</div>
<div class="row display-row">
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Liability Type</label>
<label class="control-value">{{ selectedLiability.liabilityType }}</label>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Mortgage Type</label>
<label class="control-value">{{ selectedLiability.mortgageType }}</label>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Interest Rate</label>
<label class="control-value">{{ selectedLiability.interestRate | currency:"$":2 }}%</label>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Payment Type</label>
<label class="control-value">{{ selectedLiability.paymentType }}</label>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Current Monthly Payment</label>
<label class="control-value">{{ selectedLiability.monthlyPayment }}</label>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<label class="control-label">Payment Frequency</label>
<label class="control-value">{{ selectedLiability.paymentFrequency }}</label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<label class="control-label">Remaining Term</label><br>
<label class="control-label">Years</label><span> {{ rlc.remainingTermYears }} </span>
<label class="control-label">Months</label><span> {{ rlc.remainingTermMonths }} </span><br>
<label class="control-label">End Date:</label><span> {{ rlc.remainingTermEndDate | date:'yyyy-MM-dd' }} </span>
</div>
</div>
<hr />
<label class="heading">Funding</label>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 form-group">
<label for="monthlyFunding">Recommended Monthly Payment</label>
<input name="monthlyFunding" ng-model="exisitingAccountObj.monthlyPayment" class="form-control col-md-6 col-lg-6 col-sm-6" type="text" />
</div>
</div>
<label class="heading">Lump Sum</label>
<div class="row" ng-repeat="lumpSumData in lumpSumArray track by $index">
<div class="col-lg-3 col-md-3 col-sm-3 form-group">
<label for="source" class="control-label">Source</label>
<select name="source" ng-model="selectedLumpSumSource"
ng-options="lumpSumSource as lumpSumSource for lumpSumSource in listOfLumpSumSource"
class="form-control" ng-change="getLumpSumAmount(selectedLumpSumSource)"></select>
<!--<select name="source" ng-model="source" ng-options="source for source in lumpSumSource" class="form-control"></select>-->
</div>
<div class="col-lg-3 col-md-3 col-sm-3 form-group">
<label for="amount" class="control-label">Amount</label>
<input name="amount" ng-model="rlc.payment_amount" class="form-control" type="number" min="0" max="{{rlc.remainingBalance}}" required />
</div>
<div ng-messages="recommendedLiabilityForm.amount.$error" style="color:red">
<div ng-message="validationError">this is the error</div>
<div ng-message="required">Must have value</div>
<div ng-message="minlength">Must be 5 char length</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<label class="control-label">Remaining Balance</label>
<label class="control-value">{{selectedLiability.lumpSumAmount - selectedLiability.payment_amount | currency:"$":2}}</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 vertical-line">
<span class="glyphicon glyphicon-trash" ng-click="deleteSource($index)"></span>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 add-button-container">
<button type="button" class="btn btn-primary" ng-click="addSource()"><span class="glyphicon glyphicon-plus"></span><span class="add-more-button">Add Another Source</span></button>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
<button type="submit" class="btn btn-primary" ng-click="saveRecommendedLiabilityAccount()">Save</button>
</div>
</div>
</div>
</div>
It is not clear with the code you pasted, but looks like you are creating N modals, one per each row:
<a class="edit-view" ng-click="openDetailView(id)" data-toggle="modal" data-target="#{{'modal-detail-view-cash-rec-liability-' + rlc.id}}">{{ rlc.companyName }}</a>
This link should open the modal that matches the same rc.id. This means you have N <detail-view-recommended-liability-cash/> directives, one per rc.id. Isn't it? If you did not generate the same amount of <detail-view-recommended-liability-cash/>, one per row, then you cannot identify the opening modal. Still, I think this is a bad idea, as unfortunately you have N modals, all pointing to the same scope.selectedLiability object. I'm not 100% sure, but if you mess something, can be the case that you're always seeing the last rendered modal. Also, bootstrap is plain JS + jQuery, and you're using Angular for the directive.
I think what is happening is that when you click for the first time, Angular is rendering all the modals pointing to the same object, but on the subsequent clicks the objects are not refreshed on the directives. Perhaps a $scope.$apply() can fix the bug?
Try to clean your code so you have only one modal, and make sure it is isolated as a directive, and before doing scope.detailViewFlag = true, make sure you cleaned everything before. In general, JS and Angular do not play well, and you need to abuse the use of scope.$apply() on the JS calls. That's why the angular directives for bootstrap isolates the modals passing a new object, a new controller, etc.
To sum up: you have a lot of modals on your code, one per row, pointing to the same object on the recordRecommendedLiabilityCash directive. When you click for the first time, all the modals are "filled", but on the second click you never cleaned the information from the modals, and Angular never refreshed the information. To fix this: use only one modal, and make sure you're cleaning the information before opening the modal.
90% sure that's your problem. Try to avoid modals by id, and control them manually on JS within Angular, and check when to execute the $apply().
Regards!
This is my app in Angular JS:
http://cmpe-273-010825867-fall-2016.herokuapp.com/
The problem is, when I input values into the two texts by clicking the numeric buttons, they are entered. When, i reset, the values disappear.
But when I reenter the values using the numeric buttons again, the values are appended to the values before the reset.
Here is my angular code:
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
function resetFields(){
$scope.opReset=' ';
}
function add(x, y) {
return x + y;
}
function sub(x, y) {
return x - y;
}
function mul(x, y) {
return x * y;
}
function div(x, y) {
return x / y;
}
function calc(op, x, y) {
return $scope.operators[op](parseInt(x, 10), parseInt(y));
}
$scope.operators = {
'+': add,
'-': sub,
'*': mul,
'/': div
};
$scope.op = '+';
$scope.calc = calc;
});
My HTML:
<div ng-app="myApp">
<div ng-controller="myController" ng-init='isFocused=true'>
<form>
<div class="col-lg-5 col-md-8 col-sm-12 col-xs-12">
<input width="100%" type="text" class="form-control" id="operand1" style="height:50px; font-size:32px" ng-model="operand1" ng-focus=' isFocused="operand1" ' value="{{opReset}}" autofocus>
</div>
<div class="col-lg-2 col-md-8 col-sm-12 col-xs-12 text-center" style="font-size:32px">
{{op}}
</div>
<div class="col-lg-5 col-md-8 col-sm-12 col-xs-12">
<input width="100%" type="text" class="form-control" style="height:50px; font-size:32px" ng-model="operand2" ng-focus=' isFocused="operand2" ' id="operand2" value="{{opReset}}">
</div>
<script src="js/custom.js"></script>
</div>
</div>
<div class="col-lg-5">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 eqProps text-center">
=
</div>
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12"style="font-size:32px">
{{output}}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-7">
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<div class="row-fluid">
<button class="btn btn-danger btn-fonts" type="reset" value="reset" ng-click=" opReset=resetFields() ">C</button>
<div class="btn btn-default btn-fonts" ng-repeat="n in [0]" style="margin-left:2px" ng-click='$parent[isFocused]=$parent[isFocused]+""+n' ng-disabled='isFocused===true'>{{n}}</div>
<div class="btn btn-default btn-fonts" ng-click="output=calc(op,operand1,operand2)" style="visibility:hidden">=</div>
<div class="btn btn-primary btn-fonts" ng-click="output=calc(op,operand1,operand2)">=</div>
</form>
Why are you using value="operand1" at all?
<input width="100%" type="text" class="form-control" id="operand1" style="height:50px; font-size:32px" ng-model="operand1" ng-focus=' isFocused="operand1" ' value="{{opReset}}" autofocus>
You can directly use ng-model to initialize the values, as well as clear it on clicking C button.
Change your text area code to remove values.
<input width="100%" type="text" class="form-control" id="operand1" style="height:50px; font-size:32px" ng-model="operand1" ng-focus=' isFocused="operand1" ' autofocus>
And then in resetFields function, change the values using:
$scope.operand1='';
$scope.operand2='';
please make empty value for the ng-model values(operand2,operand1)
I have 2 step form
on step 1 : ask user to how many input form needed
that use in < input type="number" ng-model="vm.nkeys" />`
on step 2 : want to create one input text for each with ng-model and name attribute in array form so that I can capture the every input box value; but both is not working; see the relevant code and wokrking plunker below.
<div ng-show="vm.step == 2" ng-form="vm.step2form" class="step-content body" >
<div class="text-center m-t-md">
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<input ng-model="key_desc" name="description_{{n}}" type="text" class="form-control" >
</div>
</div>
</div>
tried ng-model="key_desc[{{$index+1}}] but no success; also name=description_{{$index}} is also not working
see the demo plunker
what do I need to do?
Have a look at the sample snippet below:
<div ng-repeat="item in getNumber(key) track by $index">
<input type="text" ng-model="text[$index]" name="input_{{$index}}" />
<span ng-if="text[$index]">
- {{text[$index]}}
</span>
</div>
Refer the demo here.
See your code now:
<div ng-repeat="n in vm.getNumber(vm.nkeys) track by $index" class="form-group">
<!-- Other stuff -->
<input id="location" ng-model="key_desc[$index]" name="description_{{n}}" type="text" class="form-control" >
</div>
See you code here.
Try this
<input ng-model="key_desc['{{$index}}']" name="description_{{n}}" type="text" class="form-control" >
Set vm variable to ng-model.
(function () {
'user strict';
angular.module('app',[])
.controller('FormController', function ($log) {
var vm = this;
vm.title = 'Key Manager';
vm.step = 1;
vm.key_desc = [];
vm.submit = _submit;
function _submit(){
alert(vm.key_desc);
}
vm.next = function() {
$log.debug('clicked on next');
if(vm.step < 3 )
vm.step = vm.step + 1;
vm.getKeys=function(n){
return new Array(n);
};
}
vm.prev = function() {
$log.debug('clicked on prev');
if(vm.step > 0)
vm.step = vm.step - 1;
}
vm.hasPreviousStep = function(){
var previousStep = vm.step - 1;
return (previousStep > 0);
};
});
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap#3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="angular.js#1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<script src="script.js"></script>
</head>
<body ng-controller="FormController as vm">
<h1>{{vm.title}}</h1>
<div class="row">
<div class="col-lg-7">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Genarate Key(s)</h5>
</div>
<div class="ibox-content">
<form action="#" class="form" novalidate>
<div role="application" class="wizard clearfix">
<div class="content clearfix">
<div ng-form='vm.step1form' ng-show="vm.step == 1" class="step-content body" >
<div class="m-t-md">
<h2>Number of Keys</h2>
<div class="form-group">
<label class="col-sm-2 control-label">Number of Keys *</label>
<div class="col-sm-4">
<input type="number" min="0" max="50" id="nkeys" name="nkeys" ng-model="vm.nkeys" required class="form-control required" placeholder="How many keys required" />
</div>
</div>
</div>
</div>
<div ng-form="vm.step2form" ng-show="vm.step == 2" class="step-content body" >
<div class="text-center m-t-md">
<h2>This is step 2</h2>
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<div class="col-sm-4">
<input id="location" ng-model="vm.key_desc[$index]" name="description_{{n.name}}" type="text" class="form-control" >
</div>
</div>
</div>
</div>
</div>
<div class="actions clearfix">
<ul class="list-inline">
<li >
<button ng-disabled="vm.step=='1'" type="button" class="btn btn-w-m btn-primary" ng-click="vm.prev()">Previous</button>
</li>
<li >
<button type="button" class="btn btn-w-m btn-primary" ng-click="vm.next()" ng-disabled="!vm.step1form.$valid">Next</button>
</li>
<li >
<button class="btn btn-primary " ng-click="vm.submit()" type="button"><i class="fa fa-check"></i> Submit</button>
</li>
<li>
<button ui-sref="keyhouse.list" type="button" class="btn btn-w-m btn-warning" >Cancel</button>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
model name could be connect with controller name..using vm variable..
In your controller initialize vm.key_desc = [] in your controller..
Use an Array element as ng-model
<input ng-model="key_desc[$index]" name="description_{{n}}"
type="text" class="form-control" >
here the value of first input will be in $scope.key_desc[0], second in $scope.key_desc[1] and so on
before that, initialise $scope.key_desc = [] in your controller
Input box requires following validations:
1) Length input box should take upto 3 integer length values (decimals not allowed)
2) Height input box should take 3 integer number and decimals upto 2 places
Its working fine for the first time, but after clicking + button same input fields are opening but now: In the new boxes validations are not working even if I use the same classes for input boxes, i.e, newly added input boxes are taking any number of digits and characters.
Following is my code:
var app = angular.module('Calc', []);
var inputQuantity = [];
$(function () {
$(".form-control").each(function (i) {
inputQuantity[i] = this.defaultValue;
$(this).data("idx", i); // save this field's index to access later
});
$(".form-control").on("keyup", function (e) {
var $field = $(this),
val = this.value,
$thisIndex = parseInt($field.data("idx"), 10); // retrieve the index
// window.console && console.log($field.is(":invalid"));
// $field.is(":invalid") is for Safari, it must be the last to not error in IE8
if (this.validity && this.validity.badInput || isNaN(val) || $field.is(":invalid")) {
this.value = inputQuantity[$thisIndex];
return;
}
if (val.length > Number($field.attr("maxlength"))) {
val = val.slice(0, 5);
$field.val(val);
}
inputQuantity[$thisIndex] = val;
});
});
app.controller('Calc_Ctrl', function ($scope, $http) {
$scope.choices = [{id : 'choice1', l2 : 0, b2 : 0}];
$scope.areas = [{id : 'choice2', total : 0}];
$scope.addNewChoice = function () {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({
'id' : 'choice' + newItemNo, l2 : 0, b2 : 0
});
};
$scope.removeChoice = function () {
var lastItem = $scope.choices.length - 1;
if (lastItem !== 0) {
$scope.choices.splice(lastItem);
}
};
});
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="newscript.js"></script>
<body>
<div ng-app="Calc" ng-controller="Calc_Ctrl">
<div data-ng-repeat="choice in choices" class="col-md-12 col-sm-12 col-xs-12 bottom-line no-gap">
<h6>Flooring Area {{$index + 1}}
<button type="button" class="btn btn-default pull-right btn-right-gap btn-red" aria-label="Left Align" ng-click="addNewChoice()" style="margin-top: -5px;" id="plus_icon">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</h6>
<div class="row walls top-gap">
<div class="form-group col-md-3 col-sm-3 col-xs-12">
<label for="length">Length :</label>
<input type="number" class="form-control text-red bold" id="length" ng-model="choice.l2" min="0" max="999" maxlength="6" step="0.00" >
</div>
<div class="form-group col-md-3 col-sm-3 col-xs-12">
<label for="height">Height :</label>
<input type="number" class="form-control text-red bold" id="height" ng-model="choice.b2" min="0" max="999" maxlength="6" step="0.01">
</div>
<div class="form-group col-md-3 col-sm-3 col-xs-12">
<label for="area">Area sq :</label>
<input type="number" class="form-control text-red bold" id="area" value="{{choice.l2 * choice.b2}}" readonly>
</div>
<button type="button" class="btn btn-default pull-right btn-red" aria-label="Left Align" ng-click="removeChoice()" id="minus_icon">
<span class="glyphicon glyphicon-minus minus-btn" aria-hidden="true" ></span>
</button>
</div>
</div>
</div>
</body>
</html>
I do now know, but I think jquery is conflicting with my angular datatable, but even when I take off jquery (hide and show elements), ng-click keeps not working.
Here goes as well a printscreen from my table:
My AngularJS js:
angular.module('BoxApp').controller("ConfiguraBkpEmail", function($scope, $http) {
var urlRestServer = "http://localhost:8080/boxmlV2";
$scope.clientes = {};
$scope.clientesSelecionados = {};
$scope.iniciar = function() {
$http.get(urlRestServer + '/configurabkpemail').success(function(response) {
$scope.clientes = response;
});
};
$scope.iniciar();
$scope.selecionaClientes = function(selecao){
$scope.clientesSelecionados = selecao;
$('#myModal').modal('show');
if($scope.clientesSelecionados.backupEmail == 0){
// $('#enderecoEmailBackup').hide();
// $('#idLabel').hide();
} else {
// $('#enderecoEmailBackup').show();
// $('#idLabel').show();
}
};
/**
* Trecho para validar o form ao submeter.
*/
$scope.submitted = false;
$scope.submitForm = function(form) {
$scope.submitted = true;
if (form.$valid) {
$scope.editaEmailBkp();
}
};
$scope.editaEmailBkp = function() {
var dados = {
idCliente : idCliente.value,
razaoSocial : razaoSocial.value,
backupEmail : $scope.clientesSelecionados.backupEmail,
enderecoEmailBackup : enderecoEmailBackup.value
};
$http.post(urlRestServer + '/configurabkpemail/salvar', dados).then(function(response) {
$scope.sucesso();
}, function(response) {
});
};
$scope.sucesso = function() {
$scope.closeModal();
$scope.iniciar();
};
$scope.closeModal = function() {
// $('#myModal').modal('hide');
};
$scope.opcoesBkps = [
{OpcaoBkpID: 0, Tipo: '0 - Sem backup de e-mail'},
{OpcaoBkpID: 1, Tipo: '1 - Backups inconsistentes'},
{OpcaoBkpID: 2, Tipo: '2 - Backup de Todos E-mails'}
];
});
My html:
<div class="row">
<table datatable="ng" id="configuraBkpEmail" class="row-border hover table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Nome Empresa</th>
<th>CNPJ</th>
<th>Backup E-mail</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in clientes" ng-click="selecionaClientes(x)">
<td><span ng-bind="x.razaoSocial" /></td>
<td><span ng-bind="x.cnpj" /></td>
<td><span ng-bind="x.strOpcaoBackupEmail" /></td>
</tr>
</tbody>
</table>
</div>
My modal that should be opened:
<!-- Modal INICIO-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Configuração Backup de E-mail</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<f<div ultimate-datatable="datatable" width="100%"></div>orm name="form" id="form_sample_2" role="form"
class="form-horizontal ng-pristine ng-valid" novalidate>
<div class="form-group">
<label class="control-label col-md-3">Nome:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text"
ng-model="clientesSelecionados.razaoSocial"
class="form-control" id="razaoSocial" maxlength="100"
name="razaoSocial" required disabled> <span
style="color: red"
ng-show="submitted && form.razaoSocial.$error.required">Campo
Nome Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Backup de
E-mail:<span class="required" aria-required="true"> *
</span>
</label>
<div class="col-md-9">
<select size="1" name="backupEmail"
ng-model="clientesSelecionados.backupEmail"
ng-change="selecionaClientes(clientesSelecionados)"
class="form-control"
ng-options="opcoesBkp.OpcaoBkpID as opcoesBkp.Tipo for opcoesBkp in opcoesBkps"
required>
<option value="">Selecione um Recurso.</option>
</select> <span style="color: red"
ng-show="form.backupEmail.$error.required">Selecione
uma opção de backup.</span>
</div>
</div>
<div class="form-group">
<label id="idLabel" class="control-label col-md-3">Endereço:<span
class="required" aria-required="true"> * </span>
</label>
<div class="col-md-9">
<input type="email"
placeholder="Endereço do Backup para encaminhamento."
ng-model="clientesSelecionados.enderecoEmailBackup"
class="form-control" id="enderecoEmailBackup"
maxlength="100" name="enderecoEmailBackup">
</div>
</div>
<div class="form-group">
<label id="idLabel" class="control-label col-md-3">ID:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text" ng-model="clientesSelecionados.idCliente"
class="form-control" id="idCliente" maxlength="100"
name="idCliente" disabled> <span
style="color: red"
ng-show="submitted && form.idCliente.$error.required">Campo
ID Obrigatório.</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancelar
</button>
<button type="submit" class="btn btn-primary" ng-click="submitForm(form)">
Salvar
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal FIM-->
Try ng-click="$parent.selecionaClientes(x)".