javascript - 使用复选框在angularjs中过滤数据并在逗号分隔列表中显示文本框

Question

我使用 ng-repeat 显示 8 个复选框，并通过仅获取选中的值并使用另一个 ng-repeat 在逗号分隔列表中显示它们来过滤数据。但是我需要在文本框中显示精确过滤的逗号分隔字符串并更新，就像它在 ng-repeat 中更新一样。

        <div class="col-md-7">
            <label class="checkbox" ng-repeat="tooth in teeth">
                <input type="checkbox" ng-model="tooth.checked" ng-change="upperRight()" /> {{tooth.id}}
            </label>
        </div>
        <div class="col-md-3">
            <span ng-repeat="toothObj in teeth | filter:{ checked: true }">{{toothObj.id}}{{$last ? '' : ', '}}</span>
            <input type="text" ng-model="selectedTeeth" />
        </div>

Controller

$scope.teeth = [
  { id: 1, checked: false }, 
  { id: 2, checked: false }, 
  { id: 3, checked: false }, 
  { id: 4, checked: false }, 
  { id: 5, checked: false }, 
  { id: 6, checked: false }, 
  { id: 7, checked: false }, 
  { id: 8, checked: false }
];

这里为了更好理解我在plunker里加上了Plunker URL

Answer 1

我只是按照下面的方式做了

我的 Controller

$scope.teethUR = [{ id: 1, checked: false }, { id: 2, checked: false }, { id: 3, checked: false }, { id: 4, checked: false }, { id: 5, checked: false }, { id: 6, checked: false }, { id: 7, checked: false }, { id: 8, checked: false }];
$scope.upperRight = function () {
    $scope.URSelected = "";
    for (var i = 0; i < $scope.teethUR.length; i++) {
        if ($scope.teethUR[i].checked == true) {
            if ($scope.URSelected == "") {
                $scope.URSelected = $scope.teethUR[i].id;
            } else {
                $scope.URSelected = $scope.URSelected + ", " + $scope.teethUR[i].id;
            }
        }
    }
}

和 HTML

        <div class="col-md-7">
            <label class="checkbox" ng-repeat="tooth in teethUR">
                <input type="checkbox" ng-model="tooth.checked" ng-change="upperRight()" /> {{tooth.id}}
            </label>
        </div>
        <div class="col-md-3">
            <input type="text" ng-model="URSelected" class="form-control" />
        </div>

在这里查看工作代码PLUNKER DEMO