Angular-UI-Select ng模型無法在$ scope上使用簡單變量

Question

如何清除具有選定值的數組，以便值可以返回到選擇？

我有一個人脈。 人員數組值在select中可用。 當我選擇名稱時，它們將被傳輸到multipleDemo數組。 而且您不能從選擇中重新選擇它們，因為它們消失了並且移到了multipleDemo數組中。 使用Delete按鈕，我必須將來自multipleDemo數組的所有元素（第一個元素除外）刪除到people數組中。 這樣您就可以再次從選擇中選擇一個名稱。 函數$clearTag錯誤。

預期行為：示例：

選擇：弗拉基米爾
出現標簽弗拉基米爾
選擇弗拉基米爾（您不能選擇弗拉基米爾，因為他已經被選中）
單擊刪除。 用multipleDemo數組剪切元素（標簽）並將其放入數組人
您可以再次選擇Wladimir

這是我的代碼： http : //plnkr.co/edit/TPZjXkkSRrIc5ApzP07F?p=preview

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]);
    }
  }

Answer 1

Angular-UI-Select常見問題

`ng-model`無法在`$scope`上使用簡單變量

您不能寫：

錯誤

 <ui-select ng-model="multipleDemo"> <!-- Wrong --> [...] </ui-select>

您需要寫：

<ui-select ng-model="vm.multipleDemo"> <!-- Correct -->
  [...]
</ui-select>

有關更多信息，請參見

AngularUI-Select常見問題解答-常見問題

更新資料

vm.multipleDemo不起作用； 我嘗試$parent.multipleDemo它起作用。 我不明白$parent 。 為什么有效？

為了使vm.multipleDemo正常工作，控制器必須初始化vm對象：

app.controller('DemoCtrl', function($scope, $http, $timeout) {
    $scope.vm = { multipleDemo: [] };

新的AngularJS開發人員通常不會意識到ng-repeat ， ng-switch ， ng-view ， ng-include和ng-if都會創建新的子范圍，因此當涉及這些指令時，常常會出現[數據隱藏]問題。 （有關此問題的快速說明，請參見此示例。）

通過遵循始終具有“' ”的“最佳實踐”，可以很容易地避免使用基元出現此問題。 在您的ng模型中 -觀看3分鍾值得。 Misko演示了ng-switch的原始綁定問題。

— AngularJS中范圍原型/原型繼承的細微差別是什么？

避免使用$parent來解決數據隱藏問題。 這是一種脆弱的解決方案，因為在控制器和ui-select指令之間可以存在多個層次的范圍層次結構。 我認為使用$parent是一種代碼味道，這是更深層問題的征兆。

更新＃2

當我可以用$ctrl鑒於與this控制器中？

如果控制器使用“ controller as”語法實例化：

<body ng-controller="DemoCtrl as $ctrl">

    <ui-select ng-model="$ctrl.multipleDemo">
       <!-- -->
    </ui-select>

則無需使用$scope ：

app.controller('DemoCtrl', function($http) {
    this.multipleDemo =  [];

並且避免了數據隱藏問題。

有關更多信息，請參見

AngularJS控制器中的'this'與$ scope

Angular-UI-Select ng模型無法在$ scope上使用簡單變量

問題描述

如何清除具有選定值的數組，以便值可以返回到選擇？

1 個解決方案

解決方案1
0 已采納 2019-04-14 22:08:02

Angular-UI-Select常見問題

`ng-model`無法在`$scope`上使用簡單變量

更新資料

更新＃2

Angular-UI-Select ng模型無法在$ scope上使用簡單變量

問題描述

如何清除具有選定值的數組，以便值可以返回到選擇？

1 個解決方案

解決方案1 0 已采納 2019-04-14 22:08:02

Angular-UI-Select常見問題

ng-model無法在$scope上使用簡單變量

更新資料

更新＃2

解決方案1
0 已采納 2019-04-14 22:08:02

`ng-model`無法在`$scope`上使用簡單變量