I have the following code and would like to set ng-change to a model being set with {{}}. I dont want the textbox, but the code works with that. Can I do that?
<td ng-repeat="period in vm.Grid">
<div ng-model="period.Value" contenteditable="true" ng-change="vm.updateValue(period)">
{{ period.Value | currency }}
//if I use on a text box (see below), the ng-change works
<input ng-model ="period.Value" ng-change="vm.updateManualValue(period)"/>
</div>
Related
I'm very new to Angular and I have some issues with setting the default option on my radio buttons. I have already checked the other answers and using $parent does not solve my issue or I'm using it wrong.
I have a group of radio button which contains 2 input:
input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_a}}" > #{{ field.field_data.value_a }} <br>
input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_b }}"> #{{ field.field_data.value_b }}
If the page displays only 1 group(pair) of radio button, it correctly sets the default value for the radio button group. The issue here is, when there are 3 groups (3 pairs) of radio button generated by ng-repeat, it only sets the value of the last group of radio buttons and the other 2 groups are left unchecked or blank.
Is this because the radio buttons are generated using 2 ng-repeats? To help, here is my code.
I have an array $scope.filtered_forms which is set by:
$scope.filtered_forms[index] = {
form_id:id,
fields:[{
field_data: {field.label,
field_suggested:string,
value_a:string,
value_b:string},
field_type: radio
},{
field_data: {field.label,
field_suggested:string,
value_a:string,
value_b:string},
field_type radio
},{
...same input as above each object represents a group of radio
}]
}
Basically, $scope.filtered_forms contains form objects. In my html file, I have this:
<div ng-repeat="form in filtered_forms" id="#{{ form.form_id }}">
<table class="table" id="borderless">
<tr ng-repeat="field in form.fields">
<th scope="row" width="35%">#{{ field.field_data.label }}</th>
<td>
<div ng-if="field.field_type == 'radio'" style="margin-bottom: 10px">
<input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_a}}" > #{{ field.field_data.value_a }} <br>
<input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_b }}"> #{{ field.field_data.value_b }}
</div>
</td>
</tr>
/table>
This right here produces 2 groups/pairs of radio buttons but only the last group gets a default value. Even when using ng-checked and even without $parent.
Additional info, field_suggested has the same value as value_a or value_b. You can see that the radio button is under 2 ng-repeats. I'm using laravel blade and this html file is inside a modal. I removed some of the html data and property inside the form which does not relate to the issue.
Any help is appreciated.
Thanks!
You seem to have mixing many things. I copied your code created a plunker and found that the name for the radio group is not actually form_id_{{$index}} but it has whole object as string. I have changed the code hope it helps you.
See the code here
The issue is with your group names why are you using # in the names. Please remove them it should work fine. Also please see that there are no special characters in the value for name attribute.
name="{{ form.form_id }}_{{ $index }}"
I am trying to disable/enable kendo Combobox based on the text enterted in searchString text box.
If text is entered, then combobox should be disabled and if no text is there in searchString then only the combobox should be enabled.
Here is the DOJO Link
<input type='search' ng-model='searchString' />
<div style="padding-top: 1em;">
<h4>Remote data</h4>
<select kendo-combo-box k-enable='!(searchString && searchString.length > 0)'
k-placeholder="'Select product'"
k-data-text-field="'ProductName'"
k-data-value-field="'ProductID'"
k-filter="'contains'"
k-auto-bind="false"
k-min-length="3"
k-data-source="productsDataSource"
style="width: 100%" >
</select>
</div>
I know the functionality is possible with jQuery,
$('#id').kendoComboBox({ enabled: true });
But how to do this with Angular JS? I can keep $watch() in angular controller for searchString, but the question is how to disable the combobox with Angular JS code?
You can use ng-disabled
Example:
<select
kendo-combo-box="projectCombobox"
k-data-source="projectDataSource"
k-data-text-field="'code'"
k-data-value-field="'projectId'"
k-value-primitive="true"
k-ng-model="checklist.projectId"
k-suggest="true"
k-filter="'contains'"
k-change="onProjectChange"
style="width: 100%"
ng-disabled="!DriveTagSelected">
</select>
ng-disabled="!DriveTagSelected"
Here you can define a variable based on your condition.
Got the solution.
Kendo UI creates a new $scope variable when we provide the value for the kendo-combo-box.
As per below, myCombobox
<select kendo-combo-box='myCombobox'
k-placeholder="'Select product'"
k-data-text-field="'ProductName'"
k-data-value-field="'ProductID'"
k-filter="'contains'"
k-auto-bind="false"
k-min-length="3"
k-data-source="productsDataSource">
</select>
We can use the same $scope variable in the controller to disable it.
$scope.myCombobox.enable(false);
I have updated the same DOJO
a new better way is now available by using k-ng-disabled, you won't need to $watch the variable
http://docs.telerik.com/kendo-ui/AngularJS/introduction#state-changes
Who do I pass the value of an number input element to ngClick in the example below?
<div ng-repeat="item in items">
{{ item.name }}
<input type="number">
<button type="button" ng-click="something(item, valueOfInputElement)>click</button>
</div>
Adding ng-model="item.number" to the input element works but this seems like overkill to just get the value of an input element.
Adding ng-model to the input is the way to do this. It is not overkill. This is the documented way to handle input data in Angular.
<div ng-repeat="item in items">
{{ item.name }}
<input type="number" ng-model="item.myNumber">
<button type="button" ng-click="something(item)>click</button>
</div>
In the above example, ng-model is bound to item.myNumber. Binding inside each item in the ng-repeat will make sure that you are changing each item individually. Then, you can pass only item in the ng-click (because myNumber is now a property of item).
I have set up a json containing a list of countries with an ID and Country code attached:
It looks like this:
$scope.countries = [
{"name":"Afghanistan","id":"AFG","country-code":"004"},
{"name":"Åland Islands","id":"ALA","country-code":"248"},
{"name":"Albania","id":"ALB","country-code":"008"},
{"name":"Algeria","id":"DZA","country-code":"012"}
]
I then use the ng-repeat directive to create checkbox inputs for every country.
<div ng-repeat="country in countries">
<label><input type="checkbox" ng-model="{{country.id}}" ng-true-value="'{{country.name}}'" ng-false-value="''">{{country.name}}</label>
</div>
However when I run the code I only get the following to display:
Location
checkbox here {{country.name}}
If I remove the ng-model part of the repeat my checkboxes generate fine but I need a unique ng-model to be attached to every checkbox
ng-model="{{country.id}}"
How would I go about attaching a unique ng-model value?
This answer (Generate ng-model inside ng-repeat) does not provide a unique ng-model value
I will suggest you, use:
<div ng-repeat="country in countries">
<label><input type="checkbox" ng-model="myCountry.selected[country.id]" ng-true-value="'{{country.name}}'" ng-false-value="''">{{country.name}}</label>
</div>
{{myCountry.selected}}
JS:
$scope.myCountry = {
selected:{}
};
I have a list of text fields with a button below it. I can add text fields to that list dynamically with AngularJS.
The text field by default has an empty value. But I want to order the position of the list item as soon as I update the value of that text field. But when I do that the orderBy isn't triggered.
How can I make this happen?
Here's a quick demo: http://jsfiddle.net/fqnKt/214/
I just wanted to specifically note why the example was wrong (because I had the same issue even though I was using the orderBy directive).
DO NOT USE
track by $index
In your ng-repeat
I think that this is what you want:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items | orderBy:'name'">
<input type="text" ng-model="item.name" /> {{item.name}}
</li>
</ul>
<input ng-model="newItem" type="text"></input>
<button ng-click="add(newItem)">Add</button>
</div>
</div>
Working Example