Link to home
Start Free TrialLog in
Avatar of websss
websssFlag for Kenya

asked on

AngularJS: remove initial blank in select drop-down filter, select "option" value added via HTML

Angular newbie. Filtering json data returned via dataservice, and filter is done via dropdown.  I'd like to do a combination of things:

I would like to remove the initial blank value returned via Angular;
I would also like to have it pre-select a value by default that is not included in my data object (in my case, returning all objects, added as a select option via my html); and
I would like to have that initial default value displayed when the page is rendered.
I can remove the initial blank, but can't get that to incorporate the option I'm including.

I've looked into doing this with ng-repeat and ng-options, and can set the default value to one of the objects in my json via ng-options, but that doesn't seem to allow me to add in an option that doesn't exist in the data. Since I don't have a group that returns all values (and think it'd be best not to, since it that will make my data file much larger), adding that in as an option seemed the best way to do it.

There are many threads out there on how to remove the blank value returned for Angular (e.g. Empty first element in dropdown list and Angular JS Remove Blank option from Select Option, etc.). I also see how to pre-select a value via ng-init, but that seems to require the value be a part of my data object, and not an option added in post-hoc via select option as I've done. Further, I see how to pre-select an empty data value via ng-options (e.g. http://ng-learn.org/2013/11/Draw_a_select_with_default_option/) but that doesn't seem to allow me to add in a data value which would return all data objects. When I add ng-selected='true' to my option data value, it appears to be selected when the page loads, but then that value disappears and the select dropdown is rendered as ng-pristine per developer tools. Not sure what I'm missing.

Working plunk here. As is, it has the initial blank, although again, you can see that "Show All" is displayed in the drop down when the page first loads but that it goes away. Again, I would like to remove the blank and select the option as the default value, and have that displayed in the dropdown so people know that's being rendered.


html:
<div>
    <div>    
        <form action="">
            Group:  
            <select name="groups" id="grp" ng-model="groupid" ng-change="selectGroup()">
                <option value="0" ng-selected="true">Show All</option>
                <option ng-repeat="option in groups" value="{{option.ID}}" ng-selected="$first">{{option.name}}
                </option>
            </select>
        </form>
    </div>
    <div>
        <form action="">
            Asset:
            <select name="assets" id="assets" ng-model="selectedAsset">
                <option ng-repeat="option in assets | filter: myFilter" value="{{option.ID}}">{{option.driverName}}</option>
            </select>
        </form>
    </div>
</div>

Open in new window


filter:  
$scope.myFilter = function(val, i, a) {
        if($scope.groupid==0){
            return true;
        };
        var m = false;
        var grp = angular.fromJson($scope.selectedGroup);
        angular.forEach(grp.members, function(v, k){
            if(val.vpkDeviceID == v.vpkDeviceID){
                m = true;
            }
        }, m);
        return m;
    };

$scope.selectedAsset = {};
$scope.groupid = 0;
$scope.selectedGroup = {};
$scope.selectGroup = function(){
    var grp = [];
    angular.forEach($scope.groups, function(v,i){
        if($scope.groupid == v.ID){
            $scope.selectedGroup = v;
        }
    })
}

Open in new window


json:
{
   "assets": [
        {
            "deviceName": "vehicle 25",
            "vpkDeviceID": 352964050744425,
            "driverName": "Mike Smith"
        },
        {
            "deviceName": "vehicle 52",
            "vpkDeviceID": 352599041910352,
            "driverName": "John Doe"
        },
        {
            "deviceName": "vehicle 11",
            "vpkDeviceID": 862170016156711,
            "driverName": "Sarah Johnson"
        },
        {
            "deviceName": "vehicle 28",
            "vpkDeviceID": 862193020453528,
            "driverName": "Eleanor Petit"
        }
    ],
    "groups":
        [
            {"ID": 1, "name": "nairobi", "members": [{"vpkDeviceID": 352964050744425}, {"vpkDeviceID": 352599041910352}, {"vpkDeviceID": 862170016156711}]}, 
            {"ID": 2, "name": "karen", "members": [{"vpkDeviceID": 352964050744425}, {"vpkDeviceID": 352599041910352}]}, 
            {"ID": 3, "name": "langata", "members": [{"vpkDeviceID": 352599041910352}, {"vpkDeviceID": 862170016156711}, {"vpkDeviceID": 862193020453528}]},
            {"ID": 4, "name": "downtown", "members": [{"vpkDeviceID": 352964050744425}, {"vpkDeviceID": 862170016156711}]}, 
            {"ID": 5, "name": "westlands", "members": [{"vpkDeviceID": 862193020453528}]}
        ]
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial