I need disabled one input text when to select is "Product" with Angular 1
SELECT
<md-select ng-model="item.CostingType"
name="unit"
ng-change="loadVarsFromProductType(item.CostingType)">
<md-option ng-repeat="c in costingTypeAvaliable"
ng-value="c"
required
ng-selected="c.Id === item.CostingType.Id">
{{c.Description}}
</md-option>
</md-select>
INPUT
<md-input-container flex class="md-icon-float md-icon-left md-block" style="margin-bottom:0px">
<md-icon md-font-icon="material-icon"
ng-class="font.theme">attach_money</md-icon>
<input ng-model="item.CostGross"
placeholder="Custo s/ impostos"
id="CostGross"
min="0"
mdInput
ng-value="item.CostGross"
ng-hide="item.CostingType == 'Product'"
type="number" />
Already tried with ng-disabled="item.CostingType == 'Product'"
Related
I'm trying to build a dropdown menu with checkboxes that show/hide certain elements when cheked/unchecked using AngularJS Material.
Normally I'd use md-checkbox and a combintion of ng-model on the checkbox and ng-show on the element to be shown or hidden, but I'm trying to do it with the Select Header, as seen on the AngularJS Material website, and it doesn't work.
Here's the code:
<md-select ng-model="filters" multiple>
<md-select-header>
<input placeholder="" class="md-text">
</md-select-header>
<md-optgroup>
<md-option ng-value="filter-1" ng-model="showDiv">Attribute</md-option>
<md-option ng-value="filter-2" ng-model="showOther">Another Attibute</md-option>
</md-optgroup>
</md-select>
<div ng-show="showDiv || notice.status.visibility">
This is some content.
</div>
<div ng-show="showOther || notice.status.visibility">
This is more content.
</div>
Any solutions that don't envolve using javascript are most welcome!
Your option must be a single model,
Do it this way
<md-select ng-model="filters" multiple>
<md-select-header>
<input placeholder="" class="md-text">
</md-select-header>
<md-optgroup>
<md-option name="filter" ng-value="filter-1" ng-model="showDiv">Attribute</md-option>
<md-option name="filter" ng-value="filter-2" ng-model="showDiv">Another Attibute</md-option>
</md-optgroup>
</md-select>
<div ng-show="showDiv == 'filter-1' || notice.status.visibility">
This is some content.
</div>
<div ng-show="showDiv == 'filter-2' || notice.status.visibility">
This is more content.
</div>
Although it isn't a very elegant solution, I managed to make this work using ng-click, as seen below:
<md-select ng-model="filters" multiple>
<md-select-header>
<input placeholder="" class="md-text">
</md-select-header>
<md-optgroup>
<md-option ng-value="filter-1" ng-click="showDiv = ! showDiv">Attribute</md-option>
<md-option ng-value="filter-2" ng-click="showOther = ! showOther">Another Attibute</md-option>
</md-optgroup>
</md-select>
<div ng-show="showDiv || notice.status.visibility">
This is some content.
</div>
<div ng-show="showOther || notice.status.visibility">
This is more content.
</div>
Our team is creating a mdDialog that brings up a tabbed form and using ng-switch for different input types. Our ng-model works on choice inputs, boolean inputs, and string inputs, but keep getting an error for mddatepicker.
<div ng-switch-when="choice">
<md-input-container class="md-block">
<label style="font-size: 130%; white-space: normal;" for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-select id={ {element.section_element_name}} type="selectbasic" value={{element.q_value}} ng-model="element.answer">
<md-option ng-repeat="option in element.section_element_choices" value="{{option.element_choice_value}}">
{{option.element_choice_label}}
</md-option>
</md-select>
</md-input-container>
</div>
<div ng-switch-when="boolean">
<md-checkbox id={ {element.section_element_name}} ng-model="element.answer">{{element.section_element_label}}</md-checkbox>
</div>
<div ng-switch-when="glide_date">
<md-input-container>
<label style="font-size: 130%; white-space: normal;" for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-datepicker id={ {element.section_element_name}} ng-model="element.answer" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
</div>
When the form is submitted, we see an error: The ng-model for md-datepicker must be a Date instance. Currently the model is a: string
How can we modify the code so that the ng-model for just mddatepicker's get transformed into a date format?
I'm trying to build a form using AngularJS Material and am having problems getting my dropdown options to show up. My HTML is below and my options are stored in an object array on my server script. What am I doing wrong below?
<md-input-container class="md-block" flex-gt-sm ng-switch-when="choice">
<label for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-select id={ {element.section_element_name}} type="selectbasic" value={{element.q_value}}>
<md-option ng-repeat="option in element.section_element_choices" value="{{option.element_choice_value}}">
{{option.element_choice_label}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm ng-switch-when="choice">
<label for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-select id={ {element.section_element_name}} type="selectbasic" ng-model="selectedItem">
<md-option ng-repeat="option in element.section_element_choices" value="{{option.element_choice_value}}">
{{option.element_choice_label}}
</md-option>
</md-select>
I am using Angular Material and have a couple of select inputs on a form that I would like to separate with a piece of static text.
Both the selects are in md-input-containers and so the text that sits between the two needs to have the same padding around as so I have had to use a further input container to hold the static text like so:
<div layout="row" flex layout-padding>
<md-input-container flex>
<label translate>Select 1</label>
<md-select ng-model="option1" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label></label>
<input type="text" value="label" readonly>
</md-input-container>
<md-input-container flex>
<label translate>Select 2</label>
<md-select ng-model="option2" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
</div>
Working fiddle
It feels a bit hacky, and I wondered if anyone had any better suggestions.
I dont want the text to have any border bottom on, I know I could just roll my own css, but I wondered if there was a way out of the box using the AM framework?
It is very simple. Just use span element with layout-align attribute on parent element.
Here is the code
<div layout="row" flex layout-padding layout-align="start center">
<md-input-container flex>
<label translate>Select 1</label>
<md-select ng-model="option1" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
<span flex>Label</span>
<md-input-container flex>
<label translate>Select 2</label>
<md-select ng-model="option2" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
</div>
Here is working Example. http://codepen.io/next1/pen/PzbXpv
I want to implement a 'same as above' mailing address and permanent address. But then i tick on the checkbox, it does not show that the mailing address and permanent address are the same. help?
controller
$scope.candidateData.MailingAddress = {};
$scope.$watch('mailingSameAsPermanent', function (value) {
if (value) {
$scope.candidateData.Address = $scope.candidateData.MailingAddress;
} else {
$scope.candidateData.Address = angular.copy($scope.candidateData.Address);
}
partial HTML:
<h3>Permanent Address</h3>
<md-input-container class="md-block">
<label>Address</label>
<input name="add" ng-model="candidateData.Address.Address1">
<div ng-messages="CandidateDetails.add.$error">
<div ng-message="required">
Please enter your address
</div>
</div>
</md-input-container>
<md-input-container md-no-float class="md-block">
<input ng-model="candidateData.Address.Address2" placeholder="Address 2">
</md-input-container>
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Country</label>
<md-select ng-model="candidateData.Address.Country">
<md-option> <!--ng-repeat="country in countries" value="{{country.Country}}"-->>
{{candidateData.Address.Country}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Zip Code</label>
<input name="postalCode" ng-model="candidateData.Address.Zip" placeholder="12345"
required ng-pattern="/^[0-9]{5}$/">
<div ng-messages="CandidateDetails.postalCode.$error" role="alert" multiple>
<div ng-message="required" class="my-message">You must supply a zip code.</div>
<div ng-message="pattern" class="my-message">
That doesn't look like a valid postal
code.
</div>
</div>
</div>
<h3>Mailing Address</h3>
<md-checkbox ng-model="mailingSameAsPermanent" >
Tick if your mailing address is the same as your permanent address
</md-checkbox>
<div>
<md-input-container class="md-block">
<label>Address</label>
<input name="add" ng-model="candidateData.MailingAddress.Address1" ng-disabled="mailingSameAsPermanent">
<div ng-messages="CandidateDetails.add.$error">
<div ng-message="required">
Please enter your address
</div>
</div>
</md-input-container>
<md-input-container md-no-float class="md-block">
<input ng-model="candidateData.MailingAddress.Address2" placeholder="Address 2" ng-disabled="mailingSameAsPermanent">
</md-input-container>
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Country</label>
<md-select ng-model="candidateData.Address.Country">
<md-option>
<!--ng-repeat="country in countries" value="{{country.Country}}"-->>
{{candidateData.Address.Country}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Zip Code</label>
<input name="postalCode" ng-model="candidateData.Address.Zip" placeholder="12345"
required ng-pattern="/^[0-9]{5}$/">
<div ng-messages="CandidateDetails.postalCode.$error" role="alert" multiple>
<div ng-message="required" class="my-message">You must supply a zip code.</div>
<div ng-message="pattern" class="my-message">
That doesn't look like a valid postal
code.
</div>
</div>
</div>
</div>
I've implemented the functionality the way you want to achieve but in different approach.
You can check out below link to understand.
https://jsfiddle.net/alpeshprajapati/U3pVM/23941/
$scope.permanent = {address:'helloworld', state: 'gujarat'};
$scope.click = function(){
if($scope.sameasabove){
$scope.mail = angular.copy($scope.permanent);
} else {
$scope.mail = {};
}
};
You need to implement this in your code.
Try this one
<input type="checkbox" ng-model="sameas" ng-click="!sameas?permanentAddress=presentAddress:permanentAddress={}" />