I want to get ng-model's value in scope varialbe
<div class="form-group" data-ng-repeat="wing in getNumber(app.wingnum) track by $index">
<label for="InputMessage">Enter name of Wing </label>
<div class="input-group" >
<input type="text" class="form-control" name="" placeholder="Enter Name of wings"
ng-model="control[$index]"
ng-keyup="addNewWing()"required/>
</div>
</div>
Since it's your ngModel - you should have access to it via $scope.control[indexValue]
Related
<div class="row" ng-repeat="dev in devs track by $index">
<div class="form-group col-md-2">
<select class="form-control form-control-sm"
ng-change="Function1(null)"
ng-model="dev.name" ng-required="true">
<option ng-repeat="item in dev.resc"
value="{{item.Id}}">{{item.name}}</option>
</select>
</div>
<div class="form-group col-md-2">
<input type="text"
ng-change="Function2(some value)"
ng-model="dev.startDate">
</div>
<div class="form-group col-md-2">
<input type="text" my-date-picker
class="form-control form-control-sm"
placeholder="Eg. 01/01/2018" ng-required="true"
ng-change="Function2(some value)"
ng-model="dev.endDate"
>
</div>
<div class="form-group col-md-2">
<input type="number"
class="form-control form-control-sm"
placeholder="Eg. 100"
ng-change="Function3(some value)"
ng-model="dev.loc"
ng-required=true>
</div>
<div class="form-group input-group col-md-2">
<input type="number" placeholder="Eg. 100"
class="form-control form-control-sm"
ng-change="Function3(some value)"
ng-model="dev.Add"
ng-required="true">
</div>
</div>
In above code when I iterate through devs FUNCTION2 is getting called everytime ng-model loads value, but FUNCTION1 and FUNCTION3 are not getting called. I do not want FUNCTION2 to get called, how do I achieve this? what is wrong in above code? Hope my doubt is understandable.
It seems you are formatting the input model value in my-date-picker directive that triggers ng-change event. You need to handle it accordingly. Either use $watch or handle same inside directive itself.
Im using angularjs and $invalid to add .has-error to my form group.. problem is one of my form groups has multiple inputs in it, side by side..
<div class="form-group">
<div class="col-sm-6">
<label for="location">Location</label>
<select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
</div>
<div class="col-sm-6">
<label for="name">Rack Size</label>
<input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
</div>
</div>
validation would look similar to this, but would include additional validations for the size element as well.
ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }"
if name=size becomes invalid, as it stands .has-error is applied to the entire form group, and that can be confusing to the end user. Is there a way to either
apply the .has-error to a specific input
rearrange my form
layout a bit so each input is in its own form group, yet still retain
the side by side look.
The way i do it is to create form-group for each input element. Also, I believe you don't need inner <div class="col-sm-6"> since you can join that class with form-group and get the same results.
<div class="form-group col-sm-6" ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }">
<label for="location">Location</label>
<select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
</div>
<div class="form-group col-sm-6" ng-class="{ 'has-error': rackForm.size.$invalid && rackForm.size.$dirty }">
<label for="name">Rack Size</label>
<input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
</div>
Let me know if it helped
The simple answer is you are trying to put too much logic into your HTML. Look in to creating Angular directives that implement your logic behind the scenes or do it in your controller, and set the state you are trying to check on your scope.
One of the key precepts of Angular is to not put logic in the HTML.
To do this without changing your layout, just use ng-class sintax in each div with col class. Like that:
<div class="form-group">
<div class="col-sm-6" ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }">
<label for="location">Location</label>
<select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
</div>
<div class="col-sm-6" ng-class="{ 'has-error': rackForm.size.$invalid && rackForm.size.$dirty }">
<label for="name">Rack Size</label>
<input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
</div>
</div>
I am using angularjs in my project.
I have below code in my HTML:
<div class="MT10" ng-init="getPaymentDetailsById()">
<div class="panel">
<div class="form-group">
<label> Name:</label>
<span class="rightside">
<input type="text" value="" ng-model="singleGatewayDetails.name" >
</span>
</div>
<div class="form-group">
<label> APP :</label>
<span class="rightside">
<input type="text" value="" ng-model="paymentDetails.id" ng-disabled="appId">
</span>
</div>
<div class="form-group">
<label> APP KEY:</label>
<span class="rightside">
<input type="text" value="" ng-model="singleGatewayDetails.appKey" >
</span>
</div>
<div class="form-group">
<label> APP SECRET:</label>
<span class="rightside">
<input type="text" value="" ng-model="singleGatewayDetails.appSecret">
</span>
</div>
</div>
</div>
now
<span class="rightside">
<input type="text" value="" ng-model="paymentDetails.id" ng-disabled="appId">
</span>
This code displays some data in my textbox. And I want to display that data in textbox in both scenario, that is while editing and while posting new data to server. So it just displays it while editing but not when I want to post new data to server. Basically this textbox will always have some value pre-filled in it. So i am guessing I have to use some condition on that. So please help me how to achieve that.
I think I know what you are getting at. Without seeing your JS file it would be very hard to give you a good example, however using $scope.value in your JS and setting the text to {{value}} in your HTML should provide the desired result.
Now that I understand your question, you could do this:
<input type="text" ng-model="paymentDetails.id" ng-disabled="appId" ng-show="adding"/>
<span ng-hide="adding">{{paymentDetails.id}}</span>
And then in your controller you could control the variable:
$scope.adding = true
and set it to false based on some condition
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?
This is my template:
<div class="form-group"
ng-repeat="recipeIngredient in recipes.currentRecipe._ingredients">
<label class="col-sm-2 control-label">Ingredient {{ $index + 1 }}</label>
<div class="col-sm-10 form-inline" role="form">
<input
type="text"
class="form-control"
placeholder="quantity"
ng-model="recipeIngredient.quantity"
>
<input
type="text"
class="form-control"
ng-model="recipeIngredient._unit"
>
<select
class="form-control"
ng-model="recipeIngredient._unit"
ng-options="unit._id for unit in units"
/>
<select
ng-model="recipeIngredient._ingredient"
class="form-control"
ng-model="recipeIngredient._ingredient"
ng-options="ingredient._id for ingredient in ingredients"
/>
<button
type="button"
class="btn btn-default btn-xs glyphicon glyphicon-remove"
ng-click="recipes.currentRecipe.removeRecipeIngredient($index)">
</button>
</div>
</div>
I want to display the ingredients listed in the currentRecipe
If I use:
<input type="text" class="form-control" ng-model="recipeIngredient._unit">
I can see the value of _unit showed
But why the select form does not show at all the current value of recipeIngredient._unit?
<select
class="form-control"
ng-model="recipeIngredient._unit"
ng-options="unit._id for unit in units"
/>
I've verified the the _unit is part of the list of units
If I change the value of the select box to some value, the input text show "Object", which means the real value of the model is the unit object and not the unit._id text
ng-options="unit._id for unit in units"`
Please tell me if you want additional code
I've found out that when I use:
ng-options="unit._id for unit in units"
The text showed in the drop box is unit._id, but the ng-model will be the object in unit and not the text showed!
To correct my problem I've written like this:
<select ng-model="recipeIngredient._unit" class="form-control">
<option ng-repeat="unit in getId(units, '_id')">{{unit}}</option>
</select>
the getId is the function that return a list of _id from units