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>

控制器

$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

我只是按照以下方式做到了

我的控制器

$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

Answer 2

Demo

您可以在文本框和复选框之间设置双向绑定。单击复选框时，文本框将更新，更新文本框时，复选框将更新。

首先，设置两个手表：一个观察牙齿，另一个观看选择的牙齿：

  $scope.$watch ('teeth', function(newVal) {
    $scope.selectedTeeth = [];
    for(var i = 0; i < newVal.length; ++i) {
      if (newVal[i].checked) 
        $scope.selectedTeeth.push(newVal[i].id);
    }
  }, true);

  $scope.$watch('selectedTeeth', function(newVal) {
      for (var j = 0; j < $scope.teeth.length; ++j) {
        var tooth = $scope.teeth[j];
        if (newVal.indexOf(tooth.id) >= 0) {
          tooth.checked = true;
        }
        else {
          tooth.checked = false;
        }

      }
  }, true);

接下来设置一个ngModel指令，它提供一个格式化程序和一个解析器来编组'teeth'和'selectedTeeth'，反之亦然：

app.directive ('teethTextBox', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: { ngModel: '=' },
    link:function(scope, element, attr, ngModelController) {
      ngModelController.$formatters.push(function(value) {

           return value;
      });

      ngModelController.$parsers.push(function(value) {
           var numbers = [];
           var tmp = value.split(',');
           for (var i = 0; i < tmp.length; ++i) {
             numbers.push(parseInt(tmp[i]))
           }
           return numbers;
      });
    }
  }
});

连接HTML中的指令：

  <body ng-controller="MainCtrl">
    <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">
        <input type="text" ng-model="selectedTeeth" teeth-text-box />
    </div>
  </body>

使用复选框过滤angularjs中的数据，并在逗号分隔列表中显示文本框内部

2 个答案: