Question

Angular新手。过滤通过dataservice返回的json数据，并通过下拉列表完成过滤。我想做的是一系列事情：

我想删除通过Angular返回的初始空值;
我还希望默认情况下预先选择一个值包含在我的数据对象中（在我的例子中，返回所有对象，通过我的html添加为select option）;和
我希望在显示时显示初始默认值页面已呈现。

我可以删除最初的空白，但无法将其包含在我所包含的选项中。

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

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

Working plunk here。它是最初的空白，尽管如此，你可以看到，当页面首次加载时，下拉列表中会显示“全部显示”，但它会消失。同样，我想删除空白并选择该选项作为默认值，并在下拉列表中显示该选项，以便人们知道正在渲染。

感谢您的帮助！

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。将一个带有空白值的选项添加到选择中，以显示您的＆＃34;全部显示＆＃34;选项。

这是一个更新的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。无需angular.toJson()。在范围内无需groupid。

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

1 个答案: