Question

两周前我开始使用angularjs。我应该使用搜索功能进行多选输入。我所做的有两个我无法解决的问题。首先，当我搜索“a”时，它将无法正确过滤，仅显示“a”，但另一项工作正常第二，当我选择“a”到“d”然后取消选择“a”到“d”时，它会有一个错误，最后2个不会删除，第二次我这样做会变得更糟。

如果可能的话，请尝试编辑我自己的代码，因为我不擅长阅读其他人的代码

感谢任何帮助

var app = angular.module("myApp", []);

app.controller("myCtrl", function ($scope, $http) {

	$scope.selectEnable = false;
	$scope.selectedItems = [];

	$scope.openSelect = function () {
		$scope.selectEnable = !$scope.selectEnable;
	};

	$scope.itemChecked = function (data) {

		data.flag = !data.flag;
		var selected = $scope.datas.indexOf(data);
		var x = $scope.selectedItems.indexOf(data);
		if ((data.flag == true) && (x == -1)) {
			$scope.selectedItems.push(data.item);
		} else {
			$scope.selectedItems.splice(selected, 1);
		}
	};

	$scope.datas = [
		{
			"item": "a",
			/*"category": "x",*/
			"flag": false
		},
		{
			"item": "b",
			/*"category": "y",*/
			"flag": false
		},
		{
			"item": "c",
			/*"category": "x",*/
			"flag": false
		},
		{
			"item": "d",
			/*"category": "y",*/
			"flag": false
		}
	];


});

ul li {
	list-style: none;
	text-align: center;
}

#category {
	text-align: center;
	background: #ddd;
}

#listContainer {
	width: 20%;
}

span {
	cursor: pointer;
}

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
	<link rel="stylesheet" href="stylesheet/style.css">
</head>

<body ng-controller="myCtrl">

	<input type="text" ng-click="openSelect()">
	<div id="selectContainer" ng-show="selectEnable">
		<div>{{selectedItems.toString()}}</div>
		<input type="text" id="searchField" ng-model="searchField">
		<div id="listContainer">
			<ul>
				<li ng-repeat="data in datas | filter: searchField">
					
					<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="selectedItems">
					{{data.item}}
				</li>
			</ul>
		</div>
	</div>




	<script src="script.js"></script>
</body>

</html>

Answer 1

请按照以下步骤操作：

1 - 将您的itemChecked功能更改为此

$scope.itemChecked = function(data) {
    var selected = $scope.selectedItems.findIndex(function(itm) {
      return itm == data.item
    });
    if (selected == -1) {
      $scope.selectedItems.push(data.item);
    } else {
      $scope.selectedItems.splice(selected, 1);
    }


    };

2 - 添加数组以在过滤后显示数据。还要添加一个根据输入文本过滤数据的函数：

$scope.filter = function() {
    if (!$scope.searchField) {
      $scope.data2Show = angular.copy($scope.data);
    } else {
      $scope.data2Show = [];
      $scope.data.map(function(itm) {
        if (itm.item.indexOf($scope.searchField) != -1) {
          $scope.data2Show.push(itm);
        }
      });
    }
  };

  $scope.data2Show = [];

使用此数组显示列表中的项目：

<li ng-repeat="data in data2Show">

3 - 编写一个函数来检查项目是否被选中并使用：

$scope.isChecked = function (data) {
    var selected = $scope.selectedItems.findIndex(function(itm) {
      return itm == data.item;
    });
    if (selected == -1) {
      return false;
    } else {
      return true;
    }
  }

在html中使用：

<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="selectedItems" ng-checked="isChecked(data)">

4 - 将复选框ngModel从selectedItems更改为data.flag

ng-model="data.flag"

最终代码：

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope, $http) {
  $scope.selectEnable = false;
  $scope.selectedItems = [];

  $scope.openSelect = function() {
    $scope.selectEnable = !$scope.selectEnable;
  };

  $scope.itemChecked = function(data) {
    var selected = $scope.selectedItems.findIndex(function(itm) {
      return itm == data.item;
    });
    if (selected == -1) {
      $scope.selectedItems.push(data.item);
    } else {
      $scope.selectedItems.splice(selected, 1);
    }
  };

  $scope.filter = function() {
    if (!$scope.searchField) {
      $scope.data2Show = angular.copy($scope.data);
    } else {
      $scope.data2Show = [];
      $scope.data.map(function(itm) {
        if (itm.item.indexOf($scope.searchField) != -1) {
          $scope.data2Show.push(itm);
        }
      });
    }
  };

  $scope.isChecked = function(data) {
    var selected = $scope.selectedItems.findIndex(function(itm) {
      return itm == data.item;
    });
    if (selected == -1) {
      return false;
    } else {
      return true;
    }
  }

  $scope.data2Show = [];

  $scope.data = [{
      item: "a",
      /*"category": "x",*/
      flag: false
    },
    {
      item: "b",
      /*"category": "y",*/
      flag: false
    },
    {
      item: "c",
      /*"category": "x",*/
      flag: false
    },
    {
      item: "d",
      /*"category": "y",*/
      flag: false
    }
  ];

  $scope.filter();
});

ul li {
  list-style: none;
  text-align: center;
}

#category {
  text-align: center;
  background: #ddd;
}

#listContainer {
  width: 20%;
}

span {
  cursor: pointer;
}

<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
  <link rel="stylesheet" href="stylesheet/style.css">
</head>

<body ng-controller="myCtrl">

  <input type="text" ng-click="openSelect()">
  <div id="selectContainer" ng-show="selectEnable">
    <div>{{selectedItems.toString()}}</div>
    <input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
    <div id="listContainer">
      <ul>
        <li ng-repeat="data in data2Show">

          <input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

有一些准备好的多选指令。例如这一个Angular-strap selects

具有angularjs搜索能力的多选

1 个答案: