홈>
값이 선택으로 돌아갈 수 있도록 선택한 값으로 배열을 지우려면 어떻게해야합니까?
선택 : 블라디미르
태그 블라디미르 등장
블라디미르 선택 (이미 선택되어 블라디미르를 선택할 수 없습니다)
삭제를 클릭하십시오. multipleDemo 배열로 요소 (태그)를 잘라서 배열 사람에 넣습니다
다시 블라디미르를 선택할 수 있습니다
사람 배열이 있습니다. people 배열 값은 select에서 사용할 수 있습니다. 이름을 선택하면 이름이
multipleDemo
로 전송됩니다.
정렬. 그들은 사라지고
multipleDemo
로 이동하기 때문에 선택에서 다시 선택할 수 없습니다
정렬. 삭제 버튼을 사용하면
multipleDemo
에서 모든 요소를 삭제해야합니다
people 배열에 배열 (첫 번째 요소 제외). 선택에서 다시 이름을 선택할 수 있습니다. 함수
$clearTag
의 오류
.
예상 동작 : 예 :
<올>내 코드는 다음과 같습니다 : http://plnkr.co/edit/TPZjXkkSRrIc5ApzP07F?p= 미리보기
index.html
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>AngularJS ui-select</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<!-- ui-select files -->
<script src="select.js"></script>
<link rel="stylesheet" href="select.css">
<script src="demo.js"></script>
<!-- Select2 theme -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
<style>
body {
padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}
.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
</head>
<body ng-controller="DemoCtrl">
<h3>Array of strings</h3>
<button ng-click='clearTag()'>Delete</button>
<ui-select tagging tagging-label="new tag" multiple ng-model="multipleDemo"
on-select="OnClickSelect($item)" on-remove="OnRemoveSelect($item)"
theme="select2" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select name...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="item in people | filter:$select.search">
{{item.name}}
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo}}</p>
<hr>
</body>
</html>
demo.js
app.controller('DemoCtrl', function($scope, $http, $timeout) {
$scope.multipleDemo =[];
$scope.people = [
{ name: 'Adam', email: '[email protected]', age: 12, country: 'United States' },
{ name: 'Amalie', email: '[email protected]', age: 12, country: 'Argentina' },
{ name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina' },
{ name: 'Adrian', email: '[email protected]', age: 21, country: 'Ecuador' },
{ name: 'Wladimir', email: '[email protected]', age: 30, country: 'Ecuador' },
{ name: 'Samantha', email: '[email protected]', age: 30, country: 'United States' },
{ name: 'Nicole', email: '[email protected]', age: 43, country: 'Colombia' },
{ name: 'Natasha', email: '[email protected]', age: 54, country: 'Ecuador' },
{ name: 'Michael', email: '[email protected]', age: 15, country: 'Colombia' },
{ name: 'Nicolás', email: '[email protected]', age: 43, country: 'Colombia' }
];
$scope.OnClickSelect=function(item)
{
$scope.multipleDemo.push(item.name);
}
$scope.OnRemoveSelect = function(item) {
var index = $scope.people.indexOf(item.name);
$scope.people.splice(index, 1);
}
$scope.clearTag = function() {
for(var i =0; i < $scope.multipleDemo.length; i++) {
$scope.multipleDemo.splice($scope.multipleDemo[i], 1000);
$scope.people.push($scope.multipleDemo[i]);
}
}
- 답변 # 1
관련 자료
- javascript - 이 간단한 PHP 로그인 스크립트가 작동하지 않는 이유는 무엇입니까?
- c++ - 아주 간단한 CPP 코드가 제대로 작동하지 않습니다
- 루트에서만 작동하는 간단한 파이썬 파일 복사
- javascript - Mongo DB에서 작동하지 않는 두 컬렉션의 ObjectId에 대한 간단한 $lookup "left join"
- shell script - 변수를 통한 루프 작동 중지
- javascript - React Native Cant Find Variable 단순 오류
- 변수를 선언 할 때 Python 입력이 작동하지 않음
- Java spring - 자바 스프링 - 작동하지 않는 간단한 양식 게시
- 변수 summaryLength가 Hugo에서 작동하지 않음
- linux - 변수가 사용되면 SED가 bash 스크립트 내에서 작동하지 않습니다
- SwiftUI로 작동하는 ForEach 루프에서 @state 변수를 가져올 수 없습니다
- actioncable - graphql-ruby 구독이 작동하는 간단한 방송을 얻을 수 없습니다
- android - 간단한 버튼 앱용 Java 프로그램이 작동하지 않아 호환되지 않는 버전 v7이 표시됨
관련 질문
- javascript : 키로 사전 배열 내부 필터링
- javascript : 각 질문에 대한 그림으로 퀴즈를 만들려고합니다. 나는 switch 문을 사용하고 있습니다. 질문이 20개인데 code를 단순화하는 방법이 있습니까?
- javascript : 사전 정의된 JS의 숫자, 문자열, 부울, 배열의 프로토타입 체인을 수동으로 끊거나 값을 재할당할 수 있습니까?
- javascript : Google Maps API.lat은 함수 오류가 아닙니다.
- javascript : 개체에서 두 개의 숫자 속성을 정렬한 다음 매핑
- javascript : 중첩 다중 루프
- javascript : 새로 고침이 아닌 브라우저 탭을 닫을 때 로컬 저장소를 지워야 합니다.
- javascript : 단일 페이지의 html 카드에 있는 여러 필드
- javascript : URL에서 페이지로 이미지를 가져오는 방법
- javascript : 값을 사용하여 다른 배열과 일치시켜 배열에서 개체의 값을 올바르게 찾는 방법
Angular-UI-Select 일반적인 문제 와이즈 위즈
ng-model
에서 간단한 변수로 작업하지 않습니다글을 쓸 수 없습니다 :
와이즈 비즈 와이즈 비즈필요합니다 :
자세한 내용은
AngularUI-Select FAQ-일반적인 문제
<시간> 업데이트 와이즈 비즈 와이즈 비즈 작동하지 않습니다. 나는와이즈 비즈 작동하려면 컨트롤러가
와이즈 비즈 와이즈 비즈<ui-select ng-model="vm.multipleDemo"> <!-- Correct --> [...] </ui-select>
를 초기화해야합니다 개체 :vm.multipleDemo
$parent.multipleDemo
$parent
그리고vm.multipleDemo
모두 새로운 자식 범위를 만들므로 이러한 지시어가 관련 될 때 [데이터 숨기기] 문제가 종종 나타납니다. (문제에 대한 간단한 설명은이 예를 참조하십시오.)프리미티브에 대한이 문제는 항상 '.'을 갖는 '모범 사례'를 따르면 쉽게 피할 수 있습니다 당신의 ng-models에서 – 3 분 가치를 지켜라. Misko는
vm
의 기본 바인딩 문제를 보여줍니다. .— AngularJS에서 스코프 프로토 타입/프로토 타입 상속의 미묘한 차이는 무엇입니까?
app.controller('DemoCtrl', function($scope, $http, $timeout) { $scope.vm = { multipleDemo: [] };
를 사용하지 마십시오 데이터 숨기기 문제를 해결합니다. 컨트롤러와컨트롤러가 "controller as"구문으로 인스턴스화되는 경우 :
그런 다음
ng-include
를 사용할 필요가 없습니다 :데이터 숨기기 문제를 방지합니다.
자세한 내용은
'this'vs AngularJS 컨트롤러의 $scope
ng-switch