Angular conditionally enabling/disabling HTML selects - javascript

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

Related

Table in AngularJS app with many "select" elements built with ng-repeat takes very long

I have a table with variable number of records (could be up to hundreds) where its body is build with one ng-repeat.
Within each record, there are two input fields of type select where their contents is also built using ng-repear and the number of options for each is about 100.
This is working right now, except that it takes a lot of time for the page to be built (several seconds; I guess due to the large number of html records that AngularJS is adding to the DOM).
Here is an example of one of the selects:
<select class="form-control" ng-model="One_Source.Measuring_Method_Code">
<option ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}"
ng-repeat="One_Method in All_Collections.Parameters_Test_Methods"
value="{{One_Method.Value}}"
title="{{One_Method.Test_Method_Name}} | {{One_Method.Method_Internal_Name}}">
{{One_Method.Value}}
</option>
</select>
Two questions:
Is there a simple way to speed up the page building process?
As shown in the example, each option in the list has a title clause displaying a detailed description of the option's meaning. How can I add a title to the select showing the description of the current value?
For the first question I was thinking about building the list of options for each select element only upon clicking on it, but I'm not sure if that would be the best way to do it.
Try using one time bindings so that Angular doesn't watch the value by prefixing it with ::. It can also be more efficient to use track by in your ng-repeat if each row has a unique value, like an ID.
<option
ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}"
ng-repeat="One_Method in All_Collections.Parameters_Test_Methods track by One_Method.id"
value="{{::One_Method.Value}}"
title="{{::One_Method.Test_Method_Name}} | {{::One_Method.Method_Internal_Name}}"
>
{{::One_Method.Value}}
</option>
If you still can't gain the performance you're expecting from #doublesharps's answer, you will have to implement one of the following:
You could build a custom list that has a 'load more' button which would destroy say the first '50' options and load the next 50.
A better option would be to turn this into an autocomplete, where the user searches for values.
Virtual repeat - Something angular material does really well, it constantly draw's and re-draws new elements based on the scroll position inside the element.
Other resources:
http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/
https://github.com/stackfull/angular-virtual-scroll
http://klajd.github.io/angular-virtual-repeat/#/Home
I found a PARTIAL SOLUTION that still needs to be polished but is quite promising.
During creation of the page, I do not make use of ng-repeat for the options but instead deploy a single option with the value received for the field from the database (if any, otherwise the select element is left blank).
When the user clicks on the select element a $scope function is invoked that checks the number of options within the select element and, if less or equal to 1, the inner HTML of this select element is re-generated and deployed.
Though clicking on all these select in the page will take (accumulative) a comparable time as when built upon load, this time is distributed over several events (the user clicking on all the select elements) and hence it is not perceived by the user.
Now, by polishing I mean that there is a strange behavior. In order to see the generated list of options, I need to click on the select twice. Will keep investigating this and post the solution (hoping I find one).

ng-model scope not available while using with ng-options

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.

polymer select values not set

I've setup a JSbin to show an issue I'm having with a polymer select box not reflecting the model (initially), however, the model does get updated after selecting an option. Note that in my example, I'm ensuring the model is loaded after the select options are populated, however, I guess the tricky thing here is that the select box population is a nested dom-repeat (thus when module is populated, the nested dom-repeat for the 'select' must be re-populated - I'm guessing).
Here's the bin and how to test it to show the dilemma.
http://jsbin.com/xucavi/edit?html,console,output
After page loads, note there are no selections made in the 2 select boxes. Click the 'Display Values from Model' button. Note that the values show the model has values. Select 'Digital' for each of the 2 select boxes. Now click the 'Display Values from Model' button again - and note that model has been updated.
Any thoughts on how to work around this? Thanks
You need to compute the value for the selected attribute of the option elements.
Modify the outer dom-repeat to bind the actual books to the property book instead of item. Now, binding the selected attribute to a _computeSelected(item, book) function makes it possible to dynamically calculate the selected book type:
<option value='{{item.id}}' selected$='[[_computeSelected(item, book)]]'>{{item.type}}</option>
The implementation of the function itself is quite simple:
_computeSelected: function(item, book) {
return item.id === book.typeId;
}
Working example of your JS Bin:
http://jsbin.com/sodugigubo/edit?html,console,output
For a more in depth explanation, read about computed binding and attribute binding.
Warning: Be aware that Polymer dom repeat is not working for Select Option in IE.

AngularJS Custom filter is not triggering on click event

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

dynamically add item to angularjs ng-repeat

I have a directive that generates a drag/drop reorderable list with add and remove functionality. If you click in the container, an input is added dynamically, you type in it and when you type a comma, the value you typed is pushed into the list used with ng-repeat to build the list. (Should be kinda familiar to users of this site :) )
This works awesome when the initial object backing it is not null. But when the object begins null and you try to add the first item (by detecting the null and scope.$apply the initialization)the markup is not generated.
Here is a plunk to show what I mean.
http://plnkr.co/edit/Momlgpfy82kHRPwXGR8V?p=preview
In my app, the data is coming from an external source, so I can't ensure non-null lists. How can I get angular to properly respond to the array initialization (and later push)?
Set list to empty array...whenevr a new item is pushed into array angular listeners will update directive
http://plnkr.co/edit/h3GOpTX6Chh1wjcM9QrV?p=preview

Categories

Resources