I have a table of profils, so to add one i click in a button, then setAdded() function show the form.
So what I want is when I select a multiple technologies the specific labels will be shown. I tried this but didn't work.
I have a form like this:
<form>
<div>
<input type="text"
ng-model="profil.libelleProfil_en" />
<label>Display</label>
<input type="checkbox"
ng-model="profil.displayProfil" />
<label>Technologie</label>
<select multiple>
<option value="{{tecno.idTechnologie}}"
ng-repeat="tecno in technologies"
ng-click="setClicked({{tecno.idTechnologie}})">
{{tecno.libelleTechnologie_en}}
</option>
</select>
<div ng-repeat="tecno in technologies">
<label ng-hide="tecSel{{tecno.idTechnologie}}">
{{tecno.libelleTechnologie_en}}</label>
<input ng-model="profil.libelleProfil_en" type="text"
ng-hide="tecSel{{tecno.idTechnologie}}" />
<label ng-hide="tecSel{{tecno.idTechnologie}}">
{{tecno.libelleTechnologie_en}} Profil Name</label>
<input ng-model="profil.libelleProfil_en" type="text"
ng-hide="tecSel{{tecno.idTechnologie}}" />
</div>
<button ng-click="addProfil(profil)">New Profil</button>
</div>
</form>
and in my script i have something like this:
$scope.setAdded = function(){
$scope.addState = !$scope.addState;
$scope.table = [];
angular.forEach($scope.technologies,function(value,key){
var j = value.idTechnologie;
$scope.table.push(j);
$scope.tecSel +""+ j == true;
});
};
Related
I am new to angular i'm trying to clear the model on click of cross image
<div class="content">
<div class="field">
<label for="form-bridge-logo1">Logo 1</label>
<input id="form-bridge-logo1" type="text" value="" ng-model="myFile.name" />
<button class="clear-file" ng-if="myFile.name" ng-click="clear(myFile)"></button>
<input type="file" id="browsefile" name="cover" file-browser="myFile" data-logo-type="primary" class="browse-file-input" accept="image/jpg, image/jpeg, image/png"/>
<label for="browsefile" class="browse-btn">Browse</label>
</div>
</div>
<div class="content">
<div class="field">
<label for="form-bridge-logo2">Logo 2</label>
<input id="form-bridge-logo2" type="text" ng-model="myFile1.name"/>
<button class="clear-file" ng-if="myFile1.name" ng-click="clear(myFile1)"></button>
<input type="file" id="filebrowse" name="cover" file-browser="myFile1" data-logo-type="secondary" class="browse-file-input" accept="image/jpg, image/jpeg, image/png"/>
<label for="filebrowse" class="browse-btn">Browse</label>
</div>
</div>
and this is my js file.
$scope.clear = function(fileName) {
if (fileName.name === $scope.myFile.name && $scope.myFile !== undefined) {
$scope.myFile = $scope.initial;
} else if (fileName.name === $scope.myFile1.name) {
$scope.myFile1 = $scope.initial;
}
}
you can just do that:
<button class="clear-file" ng-if="myFile.YOURDATA" ng-click="myFile.YOURDATA=''">Clear</button>
So you don't need an extra function
I'm pulling a list of accounts from my data base, and using that info to make a select drop down with the name showing, and id as the value. That all works fine, however, once I try to send it to my controller to be posted to my API, there's no to or from accounts. I have the ng-model on both fields, but it doesn't seem to do anything.
Here's my HTML
<form novalidate>
<div ng-controller="newTransactionController">
<div >
<label for="from">From Account</label>
<select name="from" ng-options="acct as acct.label for acct in options" ng-model="transaction.fromAccount" >
<option value="acct.value"> </option>
</select>
</div>
<div>
<label for="to">To Account</label>
<select name="to">
<option ng-repeat="account in accounts" value="{%account._id%}" ng-model="transaction.toAccount">{%account.name%}</option>
</select>
</div>
</div>
<div>
<label for="amount">Amount</label>
<input type="text" name="amount" id="amount" value="" tabindex="1" ng-model="transaction.amount"/>
</div>
<div>
<label for="currency">Currency</label>
<select name="currency" ng-model="transaction.currency">
<option value="USD">USD</option>
<option value="BTC">BTC</option>
</select>
</div>
<div>
<label for="interval">Interval</label>
<input type="text" name="interval" id="interval" value="" tabindex="1" ng-model="transaction.interval"/>
</div>
<div>
<label for="processDate">Process Date</label>
<input type="text" name="processDate" id="processDate" value="" tabindex="1" ng-model="transaction.processDate"/>
</div>
<div>
<input class="button" type="submit" value="Send" ng-click="createTransaction(transaction)"/>
</div>
</form>
And my controller
$http.get('').success(function(data){
$scope.accounts = data;
var options = $scope.options = [];
for(var i=0; i < data.length; i++){
$scope.options.push({label: data[i].name, value: data[i]._id});
}
});
$scope.createTransaction = function(transaction){
var transactions = {
fromAccount: angular.copy(transaction.fromAccount),
toAccount: angular.copy(transaction.toAccount),
amount: angular.copy(transaction.amount),
currency: angular.copy(transaction.currency),
interval: angular.copy(transaction.interval),
processDate: angular.copy(transaction.processDate)
};
$http.post('', transactions).success(function(){console.log('sent')});
};
When I log out transactions in the controller, all I get is: Object {amount: "1", currency: "USD"}
I'm lost. I can't figure out what's missing here.
Found my problem. It was a scope issue with the <div> tag surrounding both of the to and from accounts.
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?
I would like to:
disable radio button (with name 'advertisementType') when select list (with name 'updateAdvertisement') has got only 1 element
disable submit button (with name 'saveButton') when selected option on select list has got null value
How can I do that in angular?
This is my html:
<div ng-controller="AdvertisementCtrl">
<form ng-submit="save()">
<input type="radio" ng-model="advertisementType" name="advertisementType" value="false">Update<br />
<select ng-model="updateAdvertisement" name="updateAdvertisement" ng-show="advertisementType == 'false'">
<option value>Select item</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
<input type="submit" value="Save" name="saveButton" ng-disabled="saveButton" />
</form>
</div>
This is my javascript (but I have no idea):
<script>
function AdvertisementCtrl($scope) {
}
</script>
HTML
<div ng-controller="AdvertisementCtrl">
<form ng-submit="save()">
<input type="radio" ng-model="advertisementType" name="advertisementType" ng-disabled='carTypes.length<=1' value="false">Update<br />
<select ng-model="updateAdvertisement" name="updateAdvertisement" ng-options="item.type for item in carTypes">
<option value>Select item</option>
</select>
<input type="submit" value="Save" name="saveButton" ng-disabled="!updateAdvertisement" />
</form>
</div>
JavaScript
function AdvertisementCtrl($scope) {
$scope.carTypes = [
{id:'1', type:'Volvo'},
{id:'2', type:'Saab'},
{id:'3', type:'Mercedes'},
{id:'4', type:'Audi'}
]
}
The JSFiddle is here http://jsfiddle.net/7Jw9B/
Populate the select from an array that you declare in the controller
Check array length and disable the radio button when array length is 1
Disable saveButton based on the value of updateAdvertisement
<script>
function AdvertisementCtrl($scope) {
$scope.cars = ['Volvo', 'Saab', 'Mercedes', 'Audi', 'BMW'];
}
</script>
Markup:
<div ng-controller="AdvertisementCtrl">
<form ng-submit="save()">
<input type="radio" ng-model="advertisementType" name="advertisementType" value="false" ng-disabled="cars.length <= 1">Update<br />
<select ng-model="updateAdvertisement" name="updateAdvertisement" ng-show="advertisementType == 'false'" ng-options="cars">
</select>
<input type="submit" value="Save" name="saveButton" ng-disabled="updateAdvertisement" />
</form>
</div>
Should probably be tested in a fiddle :-), could do that later
We have a somewhat complicated model on an AngularJS controller:
function controller($scope) {
$scope.model = {
childmodel1: {
childmodel2: {
property1: 'abc',
property2: 3,
property3: 0.5,
property4: 'abc'
}
}
}
}
In the HTML markup, we don't want to repeat the whole access chain everytime we access childmodel2:
<div ng-controller="ctrl">
<div>
<input type="text" ng-model="model.childmodel1.childmodel2.property1" />
<input type="text" ng-model="model.childmodel1.childmodel2.property2" />
<input type="text" ng-model="model.childmodel1.childmodel2.property3" />
<input type="text" ng-model="model.childmodel1.childmodel2.property4" />
</div>
</div>
Is there an AngularJS directive that creates a sub-scope like this:
<div ng-controller="ctrl">
<div ng-unknowndirective="model.childmodel1.childmodel2">
<input type="text" ng-model="property1" />
<input type="text" ng-model="property2" />
<input type="text" ng-model="property3" />
<input type="text" ng-model="property4" />
</div>
</div>
It's the same thing that's done on ng-repeat, but without the repetition :)
We tried ng-scope, ng-controller, ng-model, none of them works this way. Googling didn't yield any results, we don't know the terminology to search for.
Thank you #Ufuk, here's my solution:
mt.directive('subscope', function () {
return {
scope: {
subscope: '='
}
};
});
and
<div ng-controller="ctrl">
<div subscope="model.childmodel1.childmodel2">
<input type="text" ng-model="subscope.property1" />
<input type="text" ng-model="subscope.property2" />
<input type="text" ng-model="subscope.property3" />
<input type="text" ng-model="subscope.property4" />
</div>
</div>
You can use ng-init to suppress the access chain
<div ng-init="childmodel2 = model.childmodel1.childmodel2">
<input type="text" ng-model="childmodel2.property1" />
<input type="text" ng-model="childmodel2.property2" />
<input type="text" ng-model="childmodel2.property3" />
<input type="text" ng-model="childmodel2.property4" />
</div>
It creates alias model. More appropriate you create the alias in your controller like
$scope.childmodel2 = $scope.model.childmodel1.childmodel2 // and remove ng-init from HTML
Demo