It's been several hour i'm trying to figure this very simple issue.
I have ng-model attribute which bind to payment object (ng-model="payment.newPaymentLine.method"), like this one:
<div class="form-group form-inline">
<label>Payment Method:</label>
<select class="form-control"
ng-model="payment.newPaymentLine.method"
ng-options="paymentMethod for paymentMethod in payment.paymentMethods" required></select>
</div>
I was wondering how can i configure ng-resource which bind with that property, i try the following format("#payment.newPaymentLine.method") but it doesn't work:
classContext.bankRepository = classContext.salesOrderResource(
classContext.appConfig.getApiEndPoint(classContext.appConfig.apiPath.payment) + "/:PaymentMethod/banks"
, { PaymentMethod: "#payment.newPaymentLine.method" });
btw i'm using type script 1.5
I think i have misunderstood ng-resource concept, the parameter should bind to the data object properties not with the context object
Related
I'm trying to create a select widget using Angular's ng-options. I have this so far:
<select id="id_question" name="question" ng-model="post.Question"
ng-options="question.id as question.title for question in questions"
ng-change="updateFields(post.Question)" required>
</select>
I need an object passed through as a parameter to the 'updateFields' method. However, due to the ng-options using the 'id', this is not possible.
How do I retain using id as the value in the select widget but also have the ability to pass the 'question' object as a parameter in ng-change?
There is no way to pass complete object to your function if you are using ng-options. Instead what you can do is set your ng-model to some other property and use that property to assign value to your post.Question variable.
<select name="question" ng-model="selectedValue"
ng-options="question as question.title for question in questions"
ng-change="updateFields(selectedValue)" required>
</select>
in JS
$scope.updateFields = function(question) {
$scope.id = $scope.selectedvalue.id;
console.log(question);
}
Please have a look at plunker
When ever you use ng-model for a select element you need not pass the selected object as a event parameter in ng-change.
Have a look at the below code
$scope.updateFields=function(){
console.log($scope.selectedQuestion);
}
Your HTML must be as
<select name="question" ng-model="selectedQuestion"
ng-options="question as question.title for question in questions"
ng-change="updateFields()" required>
LIVE DEMO
Assumed json
$scope.questions=[
{title:'A',id:1},
{title:'Abcdef',id:4}];
I am new to ionic + angularJS... I have created a select item drop down like this
<div class="list">
<div class="item item-input item-select">
<div class="input-label" >
Unit
</div>
<select id="unit">
<option selected>Kilometer</option>
<option>Mile</option>
</select>
</div>
</div>
I am wanting to get the value with angularJS... I have tried this..
The scope.convert is coming when I click a button.
$scope.convert = function() {
alert($scope.unit);
};
It outputs "undefined".. Why is this?
$scope.unit is actually not defined in the scope, hence you get undefined. You have to define unit on the scope. Since this is an angular application, you can do it the angular way.
In your controller, you want to define a model to hold the value selected. Lets call this model unit like you are actually trying to do. Hence you can initialize this model to Kilometer in your controller.
$scope.unit = 'Kilometer'
Now you need an array of options. This can be set up in your controller as well.
$scope.unitOptions = ['Kilometer', 'Mile']
We use scope to expose our models to the view, hence in your view, you can access this models as follow:
<select id='unit' ng-options="unit for unit in unitOptions">
You will get a dropdown with 'Kilometer' and 'Mile'. You can select any one of them and your model unit will be updated.
//This should now work
$scope.convert = function() {
alert($scope.unit);
};
Note: I left the id attribute on the select element to show it has nothing to do with the model in your controller.
I'm working on an angular 1.2.x project and I have a list of radio button generated with ng-repeat and an array of objects.
markup
<div ng-repeat="answer in question.answers track by $index">
<label>
<input type="radio" name="answers" ng-value="answer" ng-model="myDataModel">{{answer.text}}
</label>
</div>
array
[
{
"id":"0",
"parentId":"0a4540dfec6549b4a3bd1b8fb6169d77",
"text":"peanuts"
},
{
"id":"1",
"parentId":"deka9fkac6549b4a3bd1b8fb6169d77",
"text":"cashews"
},
{
"id":"2",
"parentId":"0a4540dfec6asdf4a3bd1b8fb6169d77",
"text":"brazil nuts"
}
]
If I use pre tags to view my model as I select through the radios like this...
<pre>{{myDataModel | json}}</pre>
I see random properties climbing onto my data like this
{
"id":"0",
"parentId":"0a4540dfec6549b4a3bd1b8fb6169d77",
"text":"peanuts",
"spc_mXSzO":0,
"idx_mXSzO":0
}
This is causing issues when I try to pre-select a radio button after loading data from my server. When my controller sets my model equal to one of the answers it doesn't have those properties so it doesn't select the radio. Additionally those property names change every time that I refresh the page so I'm not able to mock them. Where do these come from and what might I try to get around them when preselecting answers?
Alright, I found the culprit. It was this library https://github.com/isteven/angular-multi-select
It attaches spc and idx properties for it's purposes.
I can't reproduce what you're seeing either - here's a plunker with what you have above working:
http://plnkr.co/edit/1td3XtqQjMDk1XYBbjEn?p=preview
One issue which what you have is the ng-model directive in your input tag. You shouldn't bind to primitives directly on the $scope. Here's a good description of why:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
And an update to your code:
<div ng-repeat="answer in question.answers track by $index">
<label>
<input type="radio" name="answers" ng-value="answer" ng-model="myDataModel.myAnswer" />{{answer.text}}
</label>
</div>
For the select tag with angularjs i'm doing:
<select ng-init="getdata()" data-ng-model="ob.id"
data-ng-options="level.id as level.desc for level in levels"
data-ng-selected="ob.id == level.id">
<option value="0">default...</option>
</select>
... but is this the right way because there are so many other ways on the web?
getdata() gets $scope.levels array.
You don't need to write ng-selected, it's not necessary. Also ng-init should just be used in really specific cases (nginit) so as OZ mentioned it'd better to call getData() from the controller.
<select data-ng-model="ob.id"
data-ng-options="level.id as level.desc for level in levels">
<option value="0">default...</option>
</select>
Other than that the select looks correct.
Try to avoid binding to primitives (use objects instead, for instance - $scope.data). So I'd replace levels to data.levels
It's up to you where you really need getdata() call, but controller's initialisation might be a better choice.
Also, if you want to keep your View clean of data, try to declare default value in model (or in service), not in View.
Your way is one of the good way.
I have another way with some custom coding .
Here is a code for my sample.
Html code
<div class="col-sm-6 form-group">
<label for="companyName">Tenants</label>
<select class="form-control input-lg" ng-model="selectedTenant"
required ng-options="i.CompanyName for i in tenants">
</select>
</div>
Angular Code
$http.get('/tenants')
.success(function (response) {
response.push({ CompanyName: "Select", TenantId: 0 });
$scope.tenants = response;
$scope.selectedTenant = response[$scope.tenants.length - 1];
$scope.$apply();
})
I'm looking to do use some of the validation features in an Angular Directive that I am building up. However, the directive may or may not be inside of a form. Is there a way to access the validation status of a model without trying to access the state of a form?
My template is along the lines of....
<select id="{{$id}}key" ng-model="newItem.key"
ng-options="key as key.label for key in tableKeys" required>
</select>
<span class="error" ng-show="newItem.key.$error.required">Required!</span>
<input id="{{$id}}value" type="text" ng-model="form.newItem.value" required/>
<span class="error" ng-show="newItem.value.$error.required">Required!</span>
<button ng-click="addItem()">Add Item</button>
(Not seeing any validation messages here)
On top of it, I want to addItem to check the state of validation as well
$scope.addItem = function(){
if(<do something to check validation>)
{
<do some other thing>
}
Any help would be much appreciated!
Thanks,
Andrew
My understanding is that you want to avoid using the form.xyz.$error attributes for error checking.
I do not know how to do it using a directive, but I do know how to do it using the controller.
In that case, you can use the $scope.$watch function on your model.
It would be something like this:-
1.) In your controller,
$scope.$watch('newItem.key',function(){
if( <condition to validate> ==true)
{
$scope.selectError ="errorMessage";
}
});
2.) In your HTML
<select id="{{$id}}key" ng-model="newItem.key"
ng-options="key as key.label for key in tableKeys" required>
</select>
<span class="error" ng-show="selectError">{{selectError}}</span>
Note: This is only for the select element. You can bind the text input to a model, and do the same for it as well.
The $scope.$watch function will watch out for any changes to the specified model, and will execute the accompanying code whenever any change occurs.