如何删除初始空白选项并选择 <option> ng-repeat或ng-options时的值？

Question

有角的新手。 过滤通过dataservice返回的json数据，并通过下拉列表进行过滤。 我想做的是综合考虑：

1. 我想删除通过Angular返回的初始空白值；
2. 我还希望它默认选择一个不包含在我的数据对象中的值（在我的情况下，返回所有对象，通过我的html作为select option添加）； 和
3. 我希望在呈现页面时显示该初始默认值。

我可以删除最初的空格，但不能包含我包含的选项。

我已经研究过使用ng-repeat和ng-options ，并且可以通过ng-options将默认值设置为json中的对象之一，但这似乎不允许我添加一个数据中不存在。 由于我没有一个返回所有值的组（并且最好不要这样做，因为那样会使我的数据文件更大），因此添加它作为一种选择似乎是最好的方法。

关于如何删除为Angular返回的空白值有很多线程（例如，下拉列表中的Empty第一个元素为空，以及从Select Option中选择Angular JS Remove Blank选项等）。 我还看到了如何通过ng-init预先选择一个值，但这似乎要求该值是我的数据对象的一部分，而不是像我所做的那样通过select option在事后添加的option 。 此外，我看到了如何通过ng-options （例如http://ng-learn.org/2013/11/Draw_a_select_with_default_option/ ）预先选择一个空数据值，但这似乎不允许我添加数据将返回所有数据对象的值。 当我在选项数据值中添加ng-selected='true'时，页面加载时似乎已选择该值，但该值消失了，并且每个开发人员工具将select下拉列表呈现为ng-pristine 。 不知道我在想什么。

这里工作很努力 。 照原样，它具有最初的空白，尽管您再次看到页面首次加载时下拉列表中会显示“显示全部”，但它消失了。 再次，我想删除空白并选择选项作为默认值，并将其显示在下拉列表中，以便人们知道它正在被渲染。

感谢您的协助！

的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>

过滤：

$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

解决方案很简单：使用ng-options并绑定到对象而不是ID。 为选择添加一个带有空白值的选项，以显示“全部显示”选项。

这是更新的plunkr： http ://plnkr.co/edit/E8I6D6Ti3Kzw1eukuRBQ?p=preview

关键部分：

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

无需使用ng-repeat。 不需要selectGroup()函数。 无需ng-selected。 不需要angular.toJson() 。 范围内不需要groupid 。