множественный выбор с возможностью поиска в angularjs - PullRequest
Новая
       1

множественный выбор с возможностью поиска в angularjs

0 голосов
/ 27 мая 2018

Я начал angularjs две недели назад.Я должен сделать множественный выбор с возможностью поиска.То, что я сделал, имеет 2 проблемы, которые я не могу исправить.во-первых, когда я ищу «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>

1 Ответ

0 голосов
/ 27 мая 2018

Выполните следующие действия:

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- Изменить флажок ngModels с 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>

Есть несколько подготовленных директив для множественного выбора.например этот Угловой ремень выбирает

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...