Question

我有一个看起来像这样的选择

<select
    class="form-control"
    ng-model="vm.transaction.location_from"
    ng-options="l.name for l in vm.locations">
</select>

vm.locations来自以下JSON：

[
  {
    "id": "c0d916d7-caea-42f9-a87f-a3a1f318f35e",
    "name": "Location 1"
  },
  {
    "id": "d8a299a3-7f4b-4d32-884f-efe25af3b4d2",
    "name": "Location 2"
  }
]

此外，我还有另一个选择：

<select
    class="form-control"
    ng-model="vm.transaction.item"
    ng-options="i.name for i in vm.items">
</select>

vm.items来自以下JSON：

[
  {
    "id": "9f582e58-45dd-4341-97a6-82fe637d769e",
    "name": "20oz Soft Drink Cup",
    "locations": [
      {
        "inventory_id": "9d5aa667-4a64-4317-a890-9b9291799b11",
        "location_id": "c0d916d7-caea-42f9-a87f-a3a1f318f35e"
      },
      {
        "inventory_id": "9d5aa667-4a64-4317-a890-9b9291799b11",
        "location_id": "d8a299a3-7f4b-4d32-884f-efe25af3b4d2"
      }
    ],
  }
]

我希望在更改ng-mode="vm.transaction.item"选择时，将ng-model="vm.transaction.location_from"过滤为仅显示与locations数组匹配的值。我知道我可以使用| filter: { }，但我不确定该过滤器应该是什么样的。

Answer 1

希望这是您的预期结果。以下是我尝试过的两个选项...... demo | http://embed.plnkr.co/689OQztgu8F800YjBB2L/

参考：underscorejs | angular-filter | everything-about-custom-filters-in-angular-js

public static void getOneRecord (Configuration conf, String tableName, String rowKey, String rowKey2) throws IOException{
        HTable table = new HTable(conf, tableName);
        Get get = new Get(rowKey.getBytes());
        Result rs = table.get(get);
        for(KeyValue kv : rs.raw()){
            System.out.print(new String(kv.getRow()) + " " );
            System.out.print(new String(kv.getFamily()) + ":" );
            System.out.print(new String(kv.getQualifier()) + " " );
            System.out.print(kv.getTimestamp() + " " );
            System.out.println(new String(kv.getValue()));
        }
    }

Answer 2

＆＃13;

var app = angular.module("Test", []);
app.controller("Ctrl1", function($scope) {
    $scope.location_fromArr =
    [{
        "id": "9f582e58-45dd-4341-97a6-82fe637d769e",
        "name": "20oz Soft Drink Cup",
        "locations": [{
            "inventory_id": "9d5aa667-4a64-4317-a890-9b9291799b11",
            "location_id": "c0d916d7-caea-42f9-a87f-a3a1f318f35e"
        },{
            "inventory_id": "9d5aa667-4a64-4317-a890-9b9291799b11",
            "location_id": "d8a299a3-7f4b-4d32-884f-efe25af3b4d2"
        }],
    }];

    $scope.itemArr =
    [{
        "id": "c0d916d7-caea-42f9-a87f-a3a1f318f35e",
        "name": "Location 1"
        },{
        "id": "d8a299a3-7f4b-4d32-884f-efe25af3b4d2",
        "name": "Location 2"
    }];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="Test" ng-controller="Ctrl1">
Item
<select
    class="form-control"
    ng-model="item"
    ng-options="i.name for i in itemArr">
</select>
Location
<select
    class="form-control"
    ng-model="location_from"
    ng-options="l.name for l in location_fromArr | filter:{l.id: location_from.location_id}">
</select>
</div>

＆＃13;

Answer 3

执行此操作的一种方法是提供过滤功能以过滤位置。类似的东西：

vm.filterFun = function(selectedLocations) {
  return function (location) {
    var n;
    if (!selectedLocations) {
      return true;
    }
    for(n=0;n<selectedLocations.length;n += 1) {
      if (selectedLocations[n].location_id === location.id) {
        return true;
      }
    }
    return false;
  }
}

这实际上是一个根据所选项目返回过滤功能的函数。

然后在您的选择中，您应用过滤器：

<select
      class="form-control"
      ng-model="vm.transaction.location_from"
      ng-options="l as l.name for l in vm.locations | filter:vm.filterFun(vm.transaction.item.locations)">
</select>

请参阅plunker here。

Answer 4

我会放弃角度过滤器并使用ngModelOptions的getterSetter选项。

看起来像这样：

var selectedItem, selectedLocation; 

var items = [];
var locations = [];

vm._items = items; // Static, always allow all items to be selected.
vm.locations = function () {
  // Return differing results based on selectedItem.locations. 
};

vm._transaction = {
  location: function (v) {
    /**
     * If v is null, it is not present in the selectedItem.locations array. 
     * The extra check will ensure that we don't persist a filtered out location when 
     * selecting another item. 
     */
    return (v || v === null) ? (selectedLocation = v) : selectedLocation;
  },
  item: function (v) {
    return v ? (selectedItem = v) : selectedItem;
  }
};

这里有plunker来证明这种行为。

不像过滤器那么简单/直接，但我敢打赌（至少在piped filter的情况下）你可能会看到轻微的表现采用这种方法。

我没有数字来备份上述声明，而且通常归结为数据集的大小。盐粒。

如果你需要它以相反的方式运作，你可以编写一个二级过滤器，如：

function superFilter2 (arr) {
  // If no location is selected, we can safely return the entire set.
  if (!selectedLocation) {
    return arr;
  }

  // Grab the current location ID. 
  var id = selectedLocation.id;

  // Return the items that are present in the selected location.
  return arr.filter(function (item) {
    return item.locations.map(function (l) {
      return l.location_id;
    }).indexOf(id);
  });
}

有了这个和所提供的plunker中的过滤器，有一些相似之处可以转移到更高阶的功能。最终使用一些功能性酱汁你可能最终会得到一个单一的神功能，可以双向工作。

Answer 5

你可以这样做：

<select
    class="form-control"
    ng-model="vm.transaction.item"
    ng-change="itemCahngedFn()"
    ng-options="i.name for i in vm.items"> 
</select>

var itemChangedFn = function(){
    var filtredItems = [];
    angular.forEach(vm.locations, function(item){
       if(item.name == vm.transaction.item){
           filtredItems .push(item.location); 
       }
    });

   vm.locations= filtredItems ;
}

Answer 6

我认为filter:{ id : item.locations[0].location_id }应该做到这一点。这是jsfiddle

你觉得怎么样？

AngularJS Filter Select数组

6 个答案: