当您循环遍历多个列表时，angularjs搜索特定列表的列表？

Question

下面是我的JSON，angularjs控制器，HTML和CSS。

是的，这是GitHub的演示 http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

我正在尝试添加搜索框，但我只希望它搜索列表A并且仅更新列表A.

    Models: {
  "selected": null,
  "lists": {
    "A": [
      {
        "label": "Item A1"
      },
      {
        "label": "Item A2"
      },
      {
        "label": "Item A3"
      }
    ],
    "B": [
      {
        "label": "Item B1"
      },
      {
        "label": "Item B2"
      },
      {
        "label": "Item B3"
      }
    ]
  }
}

angular.module("demo").controller("SimpleDemoController", function($scope) {

    $scope.models = {
        selected: null,
        lists: {"A": [], "B": []}
    };

    // Generate initial model
    for (var i = 1; i <= 3; ++i) {
        $scope.models.lists.A.push({label: "Item A" + i});
        $scope.models.lists.B.push({label: "Item B" + i});
    }

    // Model to JSON for demo purpose
    $scope.$watch('models', function(model) {
        $scope.modelAsJson = angular.toJson(model, true);
    }, true);

});

body {
}

.simpleDemo ul[dnd-list],
.simpleDemo ul[dnd-list] > li {
	position: relative;
}


.simpleDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}


.simpleDemo ul[dnd-list] .dndDraggingSource {
    display: none;
}


.simpleDemo ul[dnd-list] .dndPlaceholder {
    display: block;
    background-color: #ddd;
    min-height: 42px;
}


.simpleDemo ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
}


.simpleDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

<h1>Demo: Simple Lists</h1>

<div class="alert alert-success">
    <strong>Instructions:</strong>
    Drag &amp; drop the list items to move them around, or just click to select them.
    If that's too boring, check out the <a href="#/nested">nested container demo</a>
</div>

<div class="simpleDemo row">

    <div class="col-md-8">
        <div class="row">
            <div ng-repeat="(listName, list) in models.lists" class="col-md-6">
                <input type="text" class="form-control" placeholder="search" ng-model="searchBox">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">List {{listName}}</h3>
                    </div>
                    <div class="panel-body">
                        <ul dnd-list="list">
                            <li ng-repeat="item in list | filter:searchBox"
                                dnd-draggable="item"
                                dnd-moved="list.splice($index, 1)"
                                dnd-effect-allowed="move"
                                dnd-selected="models.selected = item"
                                ng-class="{'selected': models.selected === item}">
                                {{item.label}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div view-source="simple"></div>

    </div>

    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Generated Model</h3>
            </div>
            <div class="panel-body">
                <pre class="code">{{modelAsJson}}</pre>
            </div>
        </div>
    </div>

</div>