홈>2020-02-01 00:27

javascript - Angular-UI-Select ng-model이 $scope의 간단한 변수와 작동하지 않습니다

값이 선택으로 돌아갈 수 있도록 선택한 값으로 배열을 지우려면 어떻게해야합니까?

사람 배열이 있습니다. people 배열 값은 select에서 사용할 수 있습니다. 이름을 선택하면 이름이 multipleDemo 로 전송됩니다. 정렬. 그들은 사라지고 multipleDemo 로 이동하기 때문에 선택에서 다시 선택할 수 없습니다 정렬. 삭제 버튼을 사용하면 multipleDemo 에서 모든 요소를 삭제해야합니다 people 배열에 배열 (첫 번째 요소 제외). 선택에서 다시 이름을 선택할 수 있습니다. 함수 $clearTag 의 오류 .

예상 동작 : 예 :

<올>

선택 : 블라디미르

태그 블라디미르 등장

블라디미르 선택 (이미 선택되어 블라디미르를 선택할 수 없습니다)

삭제를 클릭하십시오. multipleDemo 배열로 요소 (태그)를 잘라서 배열 사람에 넣습니다

다시 블라디미르를 선택할 수 있습니다

내 코드는 다음과 같습니다 : 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: 'adam@email.com',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21, country: 'Ecuador' },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 30, country: 'United States' },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43, country: 'Colombia' },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54, country: 'Ecuador' },
    { name: 'Michael',   email: 'michael@email.com',   age: 15, country: 'Colombia' },
    { name: 'Nicolás',   email: 'nicolas@email.com',    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
Angular-UI-Select 일반적인 문제 와이즈 위즈 ng-model 에서 간단한 변수로 작업하지 않습니다
글을 쓸 수 없습니다 :
와이즈 비즈 와이즈 비즈
필요합니다 :
```
$scope
```
자세한 내용은

AngularUI-Select FAQ-일반적인 문제
<시간> 업데이트 와이즈 비즈 와이즈 비즈 작동하지 않습니다. 나는
WRONG
```
를 시도
 - 효과가있다. 나는 
<ui-select ng-model="multipleDemo"> 
  [...]
</ui-select>
를 이해하지 못한다
. 왜 작동하나요?
```
와이즈 비즈 작동하려면 컨트롤러가 <ui-select ng-model="vm.multipleDemo">  [...] </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: [] }; 를 사용하지 마십시오 데이터 숨기기 문제를 해결합니다. 컨트롤러와

New AngularJS developers often do not realize that 사이에 스코프 계층 구조가 둘 이상있을 수 있으므로 취성 솔루션입니다. 지령. 나는 ng-repeat 의 사용을 고려 코드 냄새, 더 깊은 문제의 증상이 될 수 있습니다.
<시간> 업데이트 # 2 와이즈 비즈 와이즈 비즈 보기와 ng-switch 컨트롤러에서?

컨트롤러가 "controller as"구문으로 인스턴스화되는 경우 :
```
ng-view
```
그런 다음 ng-include 를 사용할 필요가 없습니다 :
```
ng-if
```
데이터 숨기기 문제를 방지합니다.

자세한 내용은

'this'vs AngularJS 컨트롤러의 $scope
ng-switch

Python2.net

javascript - Angular-UI-Select ng-model이 $scope의 간단한 변수와 작동하지 않습니다

관련 자료