How to remove initial blank option and select 2020-03-31 09:50发布 站内问答 / 移动开发 1189 1 4

Question

Angular newbie. Filtering json data returned via dataservice, and filter is done via dropdown. What i would like to do is a combination of things:

1. I would like to remove the initial blank value returned via Angular;
2. 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
3. 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.

Thanks for any assistance!

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>

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;
        }
    })
}

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}]}
        ]
}

Answer 1

The solution is simple: use ng-options, and bind to an object rather than an ID. Add a single option with a blank value to the select in order to display your "Show all" option.

Here's an updated plunkr: http://plnkr.co/edit/E8I6D6Ti3Kzw1eukuRBQ?p=preview

Key parts:

<select name="groups" id="grp" ng-model="selectedGroup" ng-options="group.name for group in groups">
    <option value="">Show All</option>
</select>

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

No need to use ng-repeat. No need for a selectGroup() function. No need for ng-selected. No need for angular.toJson(). No need for a groupid in the scope.