I have one form which reads data from web api, bellow dates I have two radio buttons All and Excluded, when Excluded is checked I want to show only records that have Check = 1 in it. I hope you understand me, is there any easy way to solve this in the view ? some ng-if condition or something like that.
You can use the ng-show/ng-hide property (https://docs.angularjs.org/api/ng/directive/ngShow) in your record. It would look something like:
<div ng-hide="exluded && check!=1">Your record</div>
The radio button should have as ng-model the excluded variable.
With this what you would achieve is tho show all the records always, except when the variable excluded is set to true and the check variable is not 1
You can use a filter pipe in your ng-repeat:
<div ng-repeat="record in records | filter: matches">
{{record.name}}
</div>
Here is a jsfiddle that uses that approach.
Related
I am just trying to implement a simple drop down and here is my code
<select ng-change="selectTestSuite();" ng-model="testCase" ng-options="testSuite.TEST_NAME for testSuite in publicTestCase"></select>
In the controller when I am trying to print value of testCase in console it is giving undefined. But When I try to print id of testCase using
{{testCase.TEST_ID}}
It is giving me id. I have also checked by using $watch
$scope.$watch('testCase',function() {
console.log($scope.testCase);
});
Unable to figure out where I am making mistake.Appreciate any help.
I think no problem with ng-options.
Actually ng-options maps the "testSuite.TEST_NAME" as model to ng-model.
Ensure the "testSuite.TEST_NAME" is available in "publicTestCase" collection (Whether it is undefined).
You are binding the testCase to testSuite.TEST_NAME.
Your ng-options should look like this:
<select ng-change="selectTestSuite()" ng-model="testCase" ng-options="testSuite as testSuite.TEST_NAME for testSuite in publicTestCase"></select>
The model gets bind to the value of testSuite from the records in the publicTestCase array and for each of the testSuite you want the testSuite.TEST_NAME to be shown as the options text.
enter image description here
Note:- Please find the image link.image contains code
ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:
Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.
Included is an object array being used in an ng-repeat call
And here is the error
For the love of me I cannot seem to get why angular is treating these as duplicates.
Any help is much appreciated.
Angular is telling you it doesn't know how to differentiate the items in your list, so you must tell it which field in your objects make it unique. Click here for more documentation on track by
To do this you need to add track by to your ng-repeat statement. You can specify any field on the object such as yid.
<div ng-repeat="item in items track by item.yid">
...
</div>
However, if you didn't have any fields that tracked uniqueness, you can also track by the index of the item in the list using $index.
<div ng-repeat="item in items track by $index">
...
</div>
I want to filter my table data after selecting conditions from the dropdown. So i have written a angularJS custom filter and passed the parameters required. So if no conditions are selected then whole data should be displayed else filtered data should be displayed. But the filter is not triggering after selecting the condition. Help me with this.
There are a few errors. The most evident is accessing the dom i a controller. This should be in a directive instead. I created a plunker from your code and moved it to a directive. The filters are not working, but you can catch up from there.
The problem with the filter was that you was passing the customerList twice. So itshould looks like:
<tr ng-repeat="customer in (customerList | filterGridData:ctrl.filterCriteria)">
See the plunker
Here's an image of what I am trying to do., Plunkr link below.
I have a numeric stepper and rows of select drop-downs. The number of drop-downs are bound (ng-model) to the numeric value of the stepper.
I have two array variables in $scope, that are used for ng-repeat with the individual drop-downs.
How do I writer event listeners such that? If I select a Non NONE value in Driver 1, Channel a1 should be disabled. And Channel a1 needs to be enabled if the Driver 1 is None.
Understand this could be done in jQuery, by writing a change handler and selecting the next sibling and disable it. How do i get the same in Angular ?
fyi. I am using $index variable to create distinct ids for each of the dropdowns
ex: driver_1, channel_1 etc
JSON Dump invokes a helper method in $scope, which prints out the JSON.
The code is on Plunkr. http://plnkr.co/edit/j0ClqQ3P6LZtkgctFrRB
http://plnkr.co/edit/j0ClqQ3P6LZtkgctFrRB
You can use ng-disabled in the channel select:
ng-disabled="value['selectedDriver'] != 'None'"
Here is a demo: http://plnkr.co/UMP6XDe9bQa3y3dFHyE1
I'm trying to display on screen html controls using Meta-Data stored in json file.
Also I'm trying to create a state where pressing check box that will make a drop down disabled.
I was managed to achieve this for a select box with static options and a select box with dynamic options (using ng-options).
I could not achieve this when wrapping it with ng-repeat.
I have spent a lot of time making this work but in vane.
I would appreciate if someone could pin point me to the right direction.
I have created a sample code which can be found in Plunker here
From ngRepeat doc:
The ngRepeat directive instantiates a template once per item from a
collection. Each template instance gets its own scope
The trick is to add controlChecked to form and remove the ng-init. So they will be in the same scope.
<div ng-show="control.type == 'Checkbox'">
<input type="checkbox" ng-model="form.controlChecked" name="{{control.id}}"/>
</div>
<div ng-show="control.type == 'DropdownList'">
<select ng-model="control.id"
ng-disabled="!form.controlChecked"
ng-options="value.code as value.name for value in control.items"
name="{{control.id}}"
>
</select>
Demo
from http://docs.angularjs.org/api/ng.directive:ngRepeat:
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope.
so it looks like you should use the $parent scope: $parent.controlChecked.