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

사람 배열이 있습니다. 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"> <!-- Wrong -->
        [...]
      </ui-select>
      를 이해하지 못한다
      . 왜 작동하나요?

      와이즈 비즈  작동하려면 컨트롤러가 <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: [] }; 를 사용하지 마십시오  데이터 숨기기 문제를 해결합니다. 컨트롤러와

      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

    관련 자료

  • 이전 delphi - 양식이 처음 표시 될 때 일부 코드를 실행하려고합니다
  • 다음 kubernetes - cifs를 사용하여 flexvolume을 구성하면 포드가 노드에 잘못된 디렉토리를 마운트 함