I want to retrieve the position of a checked value :
HTML:
<div ng-repeat="i in range(Data.nop)">
<div class="form-group">
<div class="col-md-6 col-xs-12">
Option {{i}})
<br>
<input type="checkbox" ng-model="score1[i-1]" ng-value="{{i-1}}" name="score1"/>
<br>
{{score1}}
<textarea ng-model="options[i-1]" class="form-control"></textarea>
</div>
</div>
</div>
Controller:
$scope.score1=[];
The following solves my initial problem:
HTML
<div ng-repeat="i in range(Data.nop)">
<div class="form-group">
<div class="col-md-6 col-xs-12">
Option {{i}})
<br>
<input type="checkbox" ng-model="score1[i-1]" name="score1" ng-value="{{i-1}}" ng-true-value="'checked'" ng-false-value="'unchecked'"/>
<br>
<textarea ng-model="options[i-1]" class="form-control" ></textarea>
</div>
</div>
</div>
Controller
$scope.options=[];
$scope.score1=[];
$scope.scores=[];
angular.forEach($scope.score1,function(value,key){
if (value ==='checked'){
$scope.scores.push(key);
}
});
Related
the element marked i want to get the value to compare it with excel data
#FindBy(id="TAXEI")
//#FindBy(xpath="//*[#id='TAXEI']")
public WebElement taxesEIvalue;
public void verifyTaxesEIvalue() {
//jse.executeScript("arguments[0].setAttribute('type', '')",taxesEIvalue);
String value=taxesEIvalue.getAttribute("value");
System.out.println("the value is "+value);
}
I am facing problem to get the value in an application to compare it from excel,but unable to get value through Dom structure.The Html structure did't provide Value attribute
Here is the html code for the element unable to get the value that is in text box,i have compare with that value with the excel data using data driven
<div class="col-lg-6 col-md-6 col-sm-6">
<fieldset class="fsStyle">
<legend class="legendStyle">
<label class="control-label main">TAXES</label>
</legend>
<div class="wages">
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">EI</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXEI" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">QPIP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQPIP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">CPP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXCPP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">QPP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQPP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">Income Tax</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXIT" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">Quebec Tax</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQTax" disabled="disabled">
</div>
</div>
</div>
<a id="divExemptNamesIncome"></a>
<p class="form-control-static"><strong id="divExemptNamesIncome"></strong></p>
</div>
</fieldset>
</div>
Here is one problem . When i check all ,all check boxes are set true but if some of record , i unchecked one of record , the all check box should be unchecked .Its working in plunker but not in my work space any reason ? Here is plunker url https://plnkr.co/edit/9JeIuP1jC5hOG5hTpSZV?p=preview
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<label>
<input type="checkbox" ng-click="isAllRecordSelected()"
ng-
model="isAllSelectedForSMS">All{{isAllSelectedForSMS}}
</label>
</div>
<div class="col-md-4 col-sm-4 col-xs-4"> Mobile</div>
<div class="col-md-2 col-sm-2 col-xs-2">Name</div>
</div>
<div class ="row"
ng-repeat="friend in friends">
<div class="col-md-4 col-sm-4 col-xs-4">
<label> <input type="checkbox"
ng-model="friend.selected"
ng-change="userSelectedToggle()">
</label>
</div>
<div class="col-md-4 col-sm-4 col-xs-4"> {{friend.mobile}}</div>
<div class="col-md-2 col-sm-2 col-xs-2">{{friend.name}}</div>
</div>
Just correct your html
<input type="checkbox" ng-click="isAllRecordSelected()"
ng-model="isAllSelectedForSMS">All{{isAllSelectedForSMS}}
</label>
replace ngmodel to ng-model
i am new to Angular js i want to ask i have a case in which i have to return "YES" if the checkbox is checked or true and want to return "NO" when the value is false or unchecked.
actually my data is storing in databse in "Tinyint" 1 or 0 form i want to do when 1 occurs it shows YES any solution for this Any help will be appreciated.
Here is my html
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" ng-model="rec.Name" placeholder="Name" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" value="" ng-model="rec.isSpecial">
<span class="fa fa-check"></span>is Special</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-model="rec.isMultiple">
<span class="fa fa-check"></span>Is Multiple</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="button" ng-click="add(rec)" class="btn btn-sm btn-primary">ADD</button>
</div>
</div>
</form>
i need to target checkbox ismultiple and isspecial .
You can use ng-true-value of ng-false-value like this:
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" ng-model="rec.Name" placeholder="Name" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-model="rec.isSpecial" ng-true-value = "YES" ng-false-value="NO">
<span class="fa fa-check"></span>is Special</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-model="rec.isMultiple" ng-true-value = "YES" ng-false-value="NO">
<span class="fa fa-check"></span>Is Multiple</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="button" ng-click="add(rec)" class="btn btn-sm btn-primary">ADD</button>
</div>
</div>
</form>
I'm facing the following problem: When I try to instantiate a modal
angular.module('previewApp')
.controller('DienstleisterCtrl', function (dienstleisterRegObjService, staticDataService, $uibModal) {
var vm = this;
vm.dienstleisterTypen = staticDataService.getDienstleisterTypen();
vm.modRegObj = function (dienstleistertyp) {
dienstleisterRegObjService.vorselektiertesProdukt.typ = vm.dienstleisterTypen[dienstleistertyp];
var modalInstance = $uibModal.open({
templateUrl: 'scripts/angular/modals/templates/regform.html',
controller: 'RegFormCtrl as vm'
});
};
});
it throws in the modal controller
angular.module('previewApp')
.controller('RegFormCtrl', function (**$uibModalInstance**, dienstleisterRegObjService, staticDataService, fieldValidator) {
});
the error:
[$injector:unpr] Unknown provider: $uibModalInstanceProvider <-
$uibModalInstance <- RegFormCtrl
This is the modal:
It has two forms, one nested in the other.
<!-- Modal -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true" style="padding-right: 0px;">
<div class="modal-content">
<div class="close-modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<div class="form-horizontal" ng-form="regForm">
<fieldset>
<legend class="text-center">
<div class="panel formular-head">
<h3 class="formular-title">Registrieren</h3>
<p class="text-muted formular-description"></p>
</div>
</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="organisation">Organisation</label>
<div class="col-md-6">
<input id="organisation" name="organisation" type="text" placeholder="z.B. Muster Catering GmbH" class="form-control input-md" ng-model="vm.regObj.organisation" ng-readonly="vm.orgReadOnly" ng-change="vm.checkValue('org')" ng-required="!vm.orgReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="vorname">Vorname</label>
<div class="col-md-6">
<input id="vorname" name="vorname" type="text" placeholder="" class="form-control input-md" ng-model="vm.regObj.vorname" ng-readonly="vm.nameReadOnly" ng-change="vm.checkValue('name')" ng-required="!vm.nameReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="nachname">Nachname</label>
<div class="col-md-6">
<input id="nachname" name="nachname" type="text" placeholder="" class="form-control input-md" ng-model="vm.regObj.nachname" ng-readonly="vm.nameReadOnly" ng-change="vm.checkValue('name')" ng-required="!vm.nameReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="email">Email</label>
<div class="col-md-6">
<input id="email" name="email" type="text" placeholder="max#muster.ch" class="form-control input-md" ng-model="vm.regObj.mail" ng-required="true" ng-pattern="vm.getMailChecker();">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="natio">Nationalität</label>
<div class="col-md-6">
<select id="natio" name="nationalitaet" class="form-control" ng-model="vm.regObj.nationalitaet">
<option ng-value="vmnat" ng-repeat="vmnat in vm.nationalitaeten">{{vmnat}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="sprache">Sprache</label>
<div class="col-md-6">
<select id="sprache" name="sprache" class="form-control" ng-model="vm.regObj.sprache">
<option ng-value="vmsprache" ng-repeat="vmsprache in vm.sprachen">{{vmsprache}}</option>
</select>
</div>
</div>
<div class="form-group produkt-katalog" ng-show="!vm.regObj.produkte.length == 0">
<label class="col-md-4 control-label produkt-label"></label>
<div class="col-md-6">
<div class="" ng-repeat="vmprod in vm.regObj.produkte track by $index">
<produkt-item produkt="vmprod"></produkt-item>
</div>
</div>
</div>
<div ng-form="produktForm">
<div class="formular-together panel shadowed">
<div class="form-group">
<label class="col-md-4 control-label" for="dienstleistertyp">Dienstleistung</label>
<div class="col-md-6">
<select id="dienstleistertyp" name="dienstleistertyp" class="form-control" ng-model="vm.vorselektiertesProdukt.typ" ng-required="vm.regObj.produkte.length == 0">
<option ng-value="vmtyp" ng-repeat="vmtyp in vm.typen">{{vmtyp}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="produkt">Produkt</label>
<div class="col-md-6">
<input id="produkt" name="produkt" type="text" placeholder="z.B. Lautsprecher, Dekoration, Helfer, Stilrichtung" class="form-control input-md" ng-model="vm.vorselektiertesProdukt.produkt" ng-required="vm.regObj.produkte.length == 0 || vm.vorselektiertesProdukt.typ !== ''">
</div>
</div>
<div class="form-group">
<label class="col-md-4"></label>
<div class="col-md-6">
<button type="button" class="btn btn-default pull-right" name="submit" ng-click="vm.addProduct()" ng-disabled="produktForm.$invalid || vorselektiertesProdukt.produkt == ''">Hinzufügen</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-6">
<div class="pull-right">
<button id="abbrechen" name="abbrechen" class="btn btn-default">Abbrechen</button>
<button id="registrieren" name="registrieren" class="btn btn-default" ng-disabled="regForm.$invalid || regObj.produkte.length == 0" ng-click="vm.registrieren()">Registrieren</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Ende -->
In the app.js ui-bootstrap is declared, also in the index.html.
angular
.module('previewApp', [
'ngAnimate',
'ngSanitize',
'ngResource',
'ngTouch',
'ngMessages',
'ui.bootstrap',
'ngToast'
]);
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/angular-touch/angular-touch.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/ngToast/dist/ngToast.js"></script>
This problem gives me headache, cause I know it's just a little fault, but in the last hours i tried nearly everything an nothing changed.
Help is very appreciated. I'll post an plunkr in the answers...
OK... I've no idea why or how it works but it does.
I did the following:
I changed "controller as" in creating modal plus removed named controllers from my index.html and replaced them by $scope.
I added in dienstleister.js, where the modal is beeing created, the modalinstance.result.then functions
Now there is no error anymore. If someone has an idea why it now works i would appreciate an explanation.
Thanks for your time guys.
I am trying to modify the Jhipster template by doing the following:
If the user is not authenticated , the authentication form is showing (instead of showing a link to the authentication page as it is set by default). I m showing it in the main.html view
<div class="row">
<div class="col-md-4">
<span class="hipster img-responsive img-rounded"></span>
</div>
<div class="col-md-8">
<h1 translate="main.title">Welcome, Java Hipster!</h1>
<p class="lead" translate="main.subtitle">This is your homepage</p>
<div ng-switch="authenticated">
<div class="alert alert-success" ng-switch-when="true"
translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
You are logged in as user "Admin".
</div>
<div ng-switch-when="false">
<div class="row">
<div class="col-md-4">
<h1 translate="login.title">Authentication</h1>
<div class="alert alert-danger" ng-show="authenticationError" translate="login.messages.error.authentication">
<strong>Authentication failed!</strong> Please check your credentials and try again.
</div>
<form class="form" role="form" ng-submit="login()">
<div class="form-group">
<label for="username" translate="global.form.username">Login</label>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" ng-model="username">
</div>
<div class="form-group">
<label for="password" translate="login.form.password">Password</label>
<input type="password" class="form-control" id="password" placeholder="{{'login.form.password.placeholder' | translate}}"
ng-model="password">
</div>
<div class="form-group">
<label for="rememberMe">
{{"login.form.rememberme" | translate}}
<input type="checkbox" class="checkbox inline_class" id="rememberMe"
ng-model="rememberMe" checked>
</label>
</div>
<button type="submit" class="btn btn-primary" translate="login.form.button">Authenticate</button>
</form>
<p></p>
<div class="alert alert-warning" translate="global.messages.info.register">
You don't have an account yet? Register a new account
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and modified apps.js :
.otherwise({
templateUrl: 'views/main.html',
controller: 'LoginController',
access: {
authorizedRoles: [USER_ROLES.all]
}
});
It works if I m not using the ng-switch-when="false" statement.
If I m using this statement, the value of $scope.password and $scope.login are "undefined" in the LoginController.
Of course this statement is mandatory if I want to show the authentication form only if the user is not authenticated.
I can't understand why.
If you can help me on this, it would be great.
Thanks.
It's a common gotcha with ng-switch and other directives that create sub-scopes. This should work:
<div class="row">
<div class="col-md-4">
<span class="hipster img-responsive img-rounded"></span>
</div>
<div class="col-md-8">
<h1 translate="main.title">Welcome, Java Hipster!</h1>
<p class="lead" translate="main.subtitle">This is your homepage</p>
<div ng-switch="authenticated">
<div class="alert alert-success" ng-switch-when="true"
translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
You are logged in as user "Admin".
</div>
<div ng-switch-when="false">
<div class="row">
<div class="col-md-4">
<h1 translate="login.title">Authentication</h1>
<div class="alert alert-danger" ng-show="authenticationError" translate="login.messages.error.authentication">
<strong>Authentication failed!</strong> Please check your credentials and try again.
</div>
<form class="form" role="form" ng-submit="login()">
<div class="form-group">
<label for="username" translate="global.form.username">Login</label>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" ng-model="$parent.username">
</div>
<div class="form-group">
<label for="password" translate="login.form.password">Password</label>
<input type="password" class="form-control" id="password" placeholder="{{'login.form.password.placeholder' | translate}}"
ng-model="$parent.password">
</div>
<div class="form-group">
<label for="rememberMe">
{{"login.form.rememberme" | translate}}
<input type="checkbox" class="checkbox inline_class" id="rememberMe"
ng-model="$parent.rememberMe" checked>
</label>
</div>
<button type="submit" class="btn btn-primary" translate="login.form.button">Authenticate</button>
</form>
<p></p>
<div class="alert alert-warning" translate="global.messages.info.register">
You don't have an account yet? Register a new account
</div>
</div>
</div>
</div>
</div>
</div>
Instead of $parent you may bind values to an object, but then you will need to modify Jhipster's LoginController accordingly (and also make sure to update login.html or create a variant of the controller for the main screen only)