使用 ng-repeat 或 ng-options 时如何删除初始空白选项和 select <option> 值？

Question

Angular新手。通过数据服务过滤 json 数据 return，过滤是通过下拉列表完成的。我想做的是事情的组合：

我想通过 Angular;
我还想在 select 前设置一个默认值包含在我的数据对象中（在我的例子中，returning 所有对象，通过我的 html 添加为 select option）；和
我希望在页面已呈现。

我可以删除初始空白，但无法将其合并到我正在包含的选项中。

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

关于如何删除 return 为 Angular 编辑的空白值（例如 Empty first element in dropdown list 和 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/) 但这似乎不允许我添加一个 return 所有数据对象的数据值。当我将 ng-selected='true' 添加到我的选项数据值时，它似乎在页面加载时被 selected，但随后该值消失并且 select 下拉列表呈现为 ng-pristine每个开发人员工具。不知道我错过了什么。

Working plunk here。照原样，它有初始空白，尽管您可以再次看到 "Show All" 在页面首次加载时显示在下拉列表中，但它消失了。同样，我想删除空白和 select 选项作为默认值，并将其显示在下拉列表中，以便人们知道正在呈现。

感谢您的帮助！

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。将带有空白值的单个选项添加到 select 以显示您的 "Show all" 选项。

这是一个更新的 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。

使用 ng-repeat 或 ng-options 时如何删除初始空白选项和 select <option> 值？

How to remove initial blank option and select <option> value when using ng-repeat or ng-options?

angularjs

angularjs-ng-repeat

ng-repeat

ng-options