I want to create my custom directive data-from .
data-from="id-employee"
the attribute "data-from" indicates that the inputs of this fieldset must contains the values of the fieldsets which id start with "id-employee"
the user should be able to select a leader from the list of the employee.
Any ideas??
Thanks in advance !!
<form>
<fieldset id="id-employee[0]">
<input type="text" name="name-employee[0]"/>
<input type="text" name="lastname-employee[0]"/>
</fieldset>
<fieldset id="id-employee[1]">
<input type="text" name="name-employee[1]"/>
<input type="text" name="lastname-employee[1]"/>
</fieldset> <fieldset id="id-employee[2]">
<input type="text" name="name-employee[2]"/>
<input type="text" name="lastname-employee[2]"/>
</fieldset>
<fieldset id="id-leader" data-from="id-eployee">
<select id="select-employee">
<option>Select a Team leader</option>
<option id="select-employee-0" value="0">name lastname of the employee 0</option>
<option id="select-employee-0" value="1">name lastname of the employee 1</option>
<option id="select-employee-0" value="2">name lastname of the employee 2</option>
</select>
<input type="text" name="name-leader"/>
<input type="text" name="lastname-leader"/>
</fieldset>
</form>
You can use data binding to achieve this like -
<form ng-init="employees=[]">
<fieldset id="id-employee[0]">
<input type="text" model="employees[0].name" name="name-employee[0]"/>
<input type="text" model="employees[0].lastname" name="lastname-employee[0]"/>
</fieldset>
and then bind it in select
<select ng-model="leader" ng-options="employee.name as employee.name for employee in employees"></select>
Related
<input ng-model="company.title_{{selectedLang}}"
type="text" placeholder="" class="form-control">
I have already try:
<input ng-model="company.title_[selectedLang]"
type="text" placeholder="" class="form-control">
It doesn't work.
Can anyone help me?
<!-- REPLACE this
<input ng-model="company.title_{{selectedLang}}"
type="text" placeholder="" class="form-control">
-->
<!-- WITH this -->
<input ng-model="company['title_'+selectedLang]"
type="text" placeholder="" class="form-control">
So in AngularJS i was using the following to show specific form elements based on a value that is captured by a model:
<fieldset class="full-width sm-padding">
<label>Do you have any major medical conditions such as
heart conditions, cancer or diabetes?</label>
<div class="inline-flex">
<input type="radio" name="medicalCondition" value="yes"
tabindex="16" ng-model="clientDetails.medicalCondition">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="medicalCondition" value="no"
tabindex="17" ng-model="clientDetails.medicalCondition">No<br>
</div>
</fieldset>
<fieldset class="full-width sm-padding" ng-
if="clientDetails.medicalCondition == 'yes'">
<label>Are you currently taking any medication or do you
have any other medical conditions? For example HBP, Cholesterol, Asthma,
Depression? (Both lives if cover for couple)</label>
<div class="inline-flex">
<input type="radio" name="otherMedicalCondition"
value="yes" tabindex="18" ng-
model="clientDetails.otherMedicalCondition">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="otherMedicalCondition"
value="no" tabindex="19" ng-
model="clientDetails.otherMedicalCondition">No<br>
</div>
</fieldset>
How can I do the same thing in Angular 2?
Have tried this but not working:
<fieldset class="full-width sm-padding">
<label>Do you smoke?</label>
<div class="inline-flex">
<input type="radio" name="smoker" value="yes"
tabindex="12" [(ngModel)] = "clientDetails.smoker">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="smoker" value="no" tabindex="13" [(ngModel)] = "clientDetails.smoker">No<br>
</div>
</fieldset>
<div class="full-width flex" *ngIf="clientDetails.smoker ===
'Yes'">
<fieldset class="one-quarter sm-padding">
<label>What do you smoke?</label>
<input list="whatDoYouSmoke" name="whatDoYouSmoke"
tabindex="14">
<datalist id="whatDoYouSmoke">
<option value="Cigarettes">
<option value="Cigars">
<option value="Pipe">
<option value="E-Cigs">
<option value="Other">
</datalist>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>How many per day?</label>
<input type="number" min="0" name="howManySmokesPerDay"
tabindex="15">
</fieldset>
</div>
What am I doing wrong?
Have tried so many different options but can't quite get it to work!
thanks
The only thing I can see is that you have typed [(ngModel)] = "", try without spaces like: [(ngModel)]="". Also noticed that in your *ngIf="clientDetails.smoker ===
'Yes'", try with a little 'y' in yes as: *ngIf="clientDetails.smoker ===
'yes'". Since you are setting the value to "yes" and not "Yes" in your radio button.
There is a case problem in the Angular version. The first 'yes' starts with a lower case y and a second 'Yes' with a upper case Y.
For anyone out there looking for a solution to this, I ended up doing the following:
<fieldset class="full-width sm-padding">
<label>Do you smoke?</label>
<div class="inline-flex">
<input type="radio" name="smoker" [(ngModel)]="smoker"
[value]="true" [checked]="smoker" /> Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="smoker" [(ngModel)]="smoker"
[value]="false" [checked]="!smoker" /> No<br>
</div>
</fieldset>
<div class="full-width flex" *ngIf="smoker">
<fieldset class="one-quarter sm-padding">
<label>What do you smoke?</label>
<input list="whatDoYouSmoke" name="whatDoYouSmoke" tabindex="14">
<datalist id="whatDoYouSmoke">
<option value="Cigarettes">
<option value="Cigars">
<option value="Pipe">
<option value="E-Cigs">
<option value="Other">
</datalist>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>How many per day?</label>
<input type="number" min="0" name="howManySmokesPerDay"
tabindex="15">
</fieldset>
</div>
I've 3 input fields the first field is of type select and the remaining two are of type text. Now if I select a value from dropdown list, then the corresponding values should appear in the remaining two input fields. How to do it in AngularJS. Thank you!
For example if I select User1 from the dropdown then User1 corresponding email & phone number should appear in the corresponding input fields.
NOTE: the values are fetched from the database based on the selected option
<select>
<option value="user1">User1</option>
<option value="user2">User2</option>
<option value="user3">User3</option>
<option value="user4">User4</option>
</select>
<input type="text" id="eamil" placeholder="Email">
<input type="text" id="phone_no" placeholder="Phone number">
<select ng-options="s as s in Users" ng-model="user" ng-change = "GetData(user)">
<input type="text" id="eamil" placeholder="Email" ng-model="userEmail">
<input type="text" id="phone_no" placeholder="Phone number" ng-model="userPhone">
Now on controller
$scope.GetData = function(user){
// Here Please add Code to fetch the data from database. Here userEmailFromDB and userPhoneFromDB are the values that you get from database.
$scope.userEmail = userEmailFromDB;
$scope.userPhone = userPhoneFromDB;
}
$scope.userListSelected = function(userList){ $scope.email = userList.email; $scope.phoneNumber = userList.phoneNumber;
<select ng-model="userList" ng-options="user.name for user in userData" ng-change="userListSelected(userList)">
<input type=text ng-model="email" />
<input type=text ng-model="phoneNumber"/>
I have something like this, may it helps:
$scope.onChangeSelectedUser = function(item) {
$scope.user.user_id = item.id;
}
$scope.selectedUser = [];
<select class="form-control with-search" select-picker data-live-search="true" title="Select User" ng-model="selectedUser"
ng-options="u as u.email for u in users"
ng-change="onChangeSelectedUser(selectedUser)">
</select>
<input type="text" readonly class="form-control" ng-model="selectedUser.user_id"/>
<input type="text" readonly class="form-control" ng-model="selectedUser.email"/>
<input type="text" readonly class="form-control" ng-model="selectedUser.phone_no"/>
i have a form with two differently named ng-models. I need to pass both of them with the form. How would this work? I need to pass currentItem + currentItem.Customer I am having trouble with a PdfSharp controller and I want to see if this is the reason why the Customer Values are being passed back as Null.
controller
$scope.EmailPdf = function () {
var id = $scope.currentItem.JobId
$http.get('/api/Pdf/' + id).success(function () {
$scope.PrintPreviewModal();
});
}
form
<form ng-submit="submitJob()" enctype="multipart/form-data" name="myForm">
<fieldset>
<div class="col-xs-12">
<label>Number:</label>
<input ng-model="currentItem.JobNumber" type="text" name="JobNumber">
<label>Customer:</label>
<input type="text" ng-model="currentItem.Customer.CustomerName"
typeahead="customer.CustomerName for customer in customerArray | filter:$viewValue"
typeahead-on-select="selectEditCustomer($item)">
</div>
<input ng-model="currentItem.CustomerId" type="text" ng-hide="true"/>
<div class="inline-fields">
<label >Status:</label>
<selectng-model="currentItem.JobStatus">
<option value="" selected="selected">Select</option>
<option value="Active">Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
<label>Address:</label>
<input ng-model="currentItem.Customer.CustomerAddress" type="text">
</div>
<div class="inline-fields">
<label>Name:</label>
<input ng-model="currentItem.JobName" type="text">
<label>City:</label>
<input ng-model="currentItem.Customer.CustomerCity" type="text">
<label>St:</label>
<inputng-model="currentItem.Customer.CustomerState" type="text">
<label>Zip:</label>
<input ng-model="currentItem.Customer.CustomerZipcode" type="text">
</div>
<div class="inline-fields">
<label>Address:</label>
<input ng-model="currentItem.JobAddress" type="text">
<label>Ph:</label>
<input ng-model="currentItem.Customer.CustomerPhoneNumber" type="text">
<label>Fax:</label>
<input disabled style="width: 105px"ng-model="currentItem.Customer.CustomerFaxNumber" type="text">
</div>
<input ng-click="EmailPdf(currentItem)" type="button" value="Email" />
Well it's a bit difficult to tell exactly what you are asking here, but it sounds like you mean that you need to pass more information than the ID into your get. So you can pass the entire currentItem with all it's content like this
$http.get('/api/Pdf/' + id,angular.toJson($scope.currentItem)).....
Is that what you are trying to do?
Did you guys have any luck setting up Skeuocard (http://kenkeiter.com/skeuocard/) in your AngularJS apps? I basically copied the example code, along with JS, installed it through bower and I am keep getting this:
TypeError: Cannot read property 'length' of undefined
at Skeuocard._importImplicitOptions (http://127.0.0.1:9000/lib/skeuocard/javascripts/skeuocard.min.js:1:4226)
at new Skeuocard (http://127.0.0.1:9000/lib/skeuocard/javascripts/skeuocard.min.js:1:1162)
at new controller (http://127.0.0.1:9000/js/modules/OtherDirectives.js:98:32)
at invoke (http://127.0.0.1:9000/lib/angular/angular.js:3760:17)
at Object.instantiate (http://127.0.0.1:9000/lib/angular/angular.js:3771:23)
at http://127.0.0.1:9000/lib/angular/angular.js:6881:28
at http://127.0.0.1:9000/lib/angular/angular.js:6268:34
at forEach (http://127.0.0.1:9000/lib/angular/angular.js:329:20)
at nodeLinkFn (http://127.0.0.1:9000/lib/angular/angular.js:6255:11)
at http://127.0.0.1:9000/lib/angular/angular.js:6529:13
My init code looks like this:
var card = new Skeuocard($("#skcard"));
My template:
<div id="skcard" class="credit-card-input no-js margin_auto">
<p class="no-support-warning">Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades...
<label for="cc_type">Card Type</label>
<select name="cc_type">
<option value="">...</option>
<option value="visa">Visa</option>
<option value="discover">Discover</option>
<option value="mastercard">MasterCard</option>
<option value="maestro">Maestro</option>
<option value="jcb">JCB</option>
<option value="unionpay">China UnionPay</option>
<option value="amex">American Express</option>
<option value="dinersclubintl">Diners Club</option>
</select>
<label for="cc_number">Card Number</label>
<input id="cc_number" type="text" name="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19"/>
<label for="cc_exp_month">Expiration Month</label>
<input id="cc_exp_month" type="text" name="cc_exp_month" placeholder="00"/>
<label for="cc_exp_year">Expiration Year</label>
<input id="cc_exp_year" type="text" name="cc_exp_year" placeholder="00"/>
<label for="cc_name">Cardholder's Name</label>
<input id="cc_name" type="text" name="cc_name" placeholder="John Doe"/>
<label for="cc_cvc">Card Validation Code</label>
<input id="cc_cvc" type="text" name="cc_cvc" placeholder="123" maxlength="3" size="3"/>
</p>
</div>
Any ideas for this?
Thanks
After 3 days of debugging, trying, and beating my head against the wall, I have fount the problem. The bloody HTML2JADE converted converted the whole thing into paragraph, that's why it wasn' working... with this code, it works:
<div id="skeuocard" class="credit-card-input no-js margin_auto">
<p class="no-support-warning">Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades...</p>
<label for="cc_type">Card Type</label>
<select name="cc_type">
<option value="">...</option>
<option value="visa">Visa</option>
<option value="discover">Discover</option>
<option value="mastercard">MasterCard</option>
<option value="maestro">Maestro</option>
<option value="jcb">JCB</option>
<option value="unionpay">China UnionPay</option>
<option value="amex">American Express</option>
<option value="dinersclubintl">Diners Club</option>
</select>
<label for="cc_number">Card Number</label>
<input id="cc_number" type="text" name="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19"/>
<label for="cc_exp_month">Expiration Month</label>
<input id="cc_exp_month" type="text" name="cc_exp_month" placeholder="00"/>
<label for="cc_exp_year">Expiration Year</label>
<input id="cc_exp_year" type="text" name="cc_exp_year" placeholder="00"/>
<label for="cc_name">Cardholder's Name</label>
<input id="cc_name" type="text" name="cc_name" placeholder="John Doe"/>
<label for="cc_cvc">Card Validation Code</label>
<input id="cc_cvc" type="text" name="cc_cvc" placeholder="123" maxlength="3" size="3"/>
</div>