时间戳

首页 > 解决方案 > Angular将值从下拉列表添加到列表中，从列表添加到下拉列表中

javascript - Angular将值从下拉列表添加到列表中，从列表添加到下拉列表中

问题描述

当我将下拉列表中的人员添加到列表中或从列表中添加回下拉列表时，我的代码功能出现问题，然后出现很多错误，例如同一个人被添加 2 次，或者当我删除一个人然后另一个人被删除相反，我不确定错误/错误在哪里，也许你可以帮助我。

小提琴

HTML：

<div ng-app="miniapp">
<div ng-controller="Ctrl">
    <div ng-init="getPersons()" class="dropdown">
       <select name="selectedPerson" ng-model="selectedPerson">
          <option ng-repeat="Person in Persons">{{Person}}</option>
       </select>
       <button  ng-click="addPerson()">
          <div>
             <i class="fa fa-plus"></i>
          </div>
        </button>
    </div>
    <div class="block-form ng-scope" ng-init="initSavedPersons()">
        <ul class="pers-ul">
            <li class="pers-li" ng-repeat="person in persons | orderBy:'name'">
               <span class="fa" ng-click="getDeletedPerson($event); deletePerson($index)">&#xf00d;</span>
               <span>{{person.name}}</span>
            </li>
         </ul>
     </div>
</div>

控制器：

var $scope;
var app = angular.module("myapp", []);

app.controller("Ctrl", function($scope) {
  $scope.persons = [];
  $scope.Persons = [];
  var deletedPers = "";

  $scope.getPersons = function() {
    $scope.Persons = ["Tom", "Jerry"];
  };

  $scope.initSavedPersons = function() {
    var initPers = ["Max", "Alfi"];
    for (var i = 0; i < initPers.length; i++) {
      $scope.persons.push({ name: initPers[i] });
    }
  };

  $scope.addPerson = function() {
    var index = 0;
    $scope.persons.push({ name: $scope.selectedPerson });
    for (var i = 0; i < $scope.Persons.length; i++) {
      if ($scope.Persons[i] == $scope.selectedPersons) {
        index = i;
      }
    }

    console.log(index);
    $scope.Persons.splice(index, 1);
    $scope.Persons.sort();
  };

  $scope.getDeletedPerson = function(obj) {
    deletedPers = obj.currentTarget.nextElementSibling.innerHTML;
  };

  $scope.deletePerson = function(index) {
    $scope.persons.splice(index, 1);
    $scope.Persons.push(deletedPers);
  };
});

标签： javascriptangularjs

解决方案

我使用 lodash 来操作数组。请检查下面的代码；

var $scope;
var app = angular.module('myapp', []).constant('_', window._);

function Ctrl($scope) {
	$scope.persons = [];
  $scope.Persons = [];
  var deletedPers = "";
  
  	$scope.getPersons = function () {
        $scope.Persons = ["Tom", "Jerry"];
    }


    $scope.initSavedPersons = function () {
        var initPers = ["Max", "Alfi"];
        initPers.sort();
        for (var i = 0; i < initPers.length; i++) {
            $scope.persons.push({ 'name': initPers[i] });
        }
    }
  
  $scope.addPerson = function () {
        var index = 0;
        $scope.persons.push({ 'name': $scope.selectedPerson });
        var sortedArray = _.sortBy($scope.persons, ['name']);
        $scope.persons.length = 0;
        $scope.persons.push.apply($scope.persons, sortedArray);
        _.remove($scope.Persons, function(item) { return item == $scope.selectedPerson});
    }

    $scope.deletePerson = function (index) {
     		console.log(index);     		
    		var deletedPerson = Object.assign({}, $scope.persons[index]);
        _.remove($scope.persons, { 'name' : deletedPerson.name});
        
        $scope.Persons.push(deletedPerson.name);
        $scope.Persons.sort();
    }
}
.pers-ul {
        list-style: none;
        padding-left: 0;
        margin-top: 25px;
    }

    .pers-li {
        border: 1px solid black;
        display: inline-block;
        padding: 5px 10px;
        margin-right: 5px;
        margin-bottom: 5px;
        text-transform: capitalize;
    }
    

    
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="Ctrl">
        <div ng-init="getPersons()" class="dropdown">
           <select name="selectedPerson" ng-model="selectedPerson">
              <option ng-repeat="Person in Persons">{{Person}}</option>
           </select>
           <button  ng-click="addPerson()">
              <div>
                 <i class="fa fa-plus"></i>
              </div>
            </button>
        </div>
        <div class="block-form ng-scope" ng-init="initSavedPersons()">
            <ul class="pers-ul">
                <li class="pers-li" ng-repeat="person in persons">
                   <span class="fa" ng-click="deletePerson($index)">&#xf00d;</span>
                   <span>{{person.name}}</span>
                </li>
             </ul>
         </div>
    </div>
</div>

推荐阅读