Question

我正在尝试根据所选的下拉选项显示或隐藏字段。此外，如果该字段处于活动状态，则该选项不应显示在“添加过滤器”下拉列表中。我创建了一个“{3}}”。

根据我到目前为止所做的，如果我点击删除字段按钮（x），该字段将被隐藏，但是当我从添加过滤器选项添加字段并尝试再次删除它时，它不会工作。我不确定我是否正确行事，我觉得应该有更好的方法来实现这一目标。有人可以帮忙吗？

控制器

angular.module('app', [])
.controller('Main', ['$scope', function($scope) {

$scope.title = "hello";
$scope.isName = true;
$scope.isDropdown = true;

$scope.hideName = function() {
  $scope.isName = false;
  $scope.removeFilterOption($scope.isName);
};

$scope.hideDropdown = function() {
  $scope.isDropdown = false;
};

$scope.removeFilterOption = function(value) {
  if (value != $scope.isName) {
    $scope.add_options.splice(1, 1);
  } else {
    $scope.add_options.splice(1, 0, {
      text: "Name",
      value: "name"
    });
  }
};

$scope.add_options = [];
$scope.add_filter = $scope.add_options[0];

$scope.selected = function(value) {
  if (value === "name") {
    $scope.isName = true;
  } else if (value === "cars") {
    $scope.isDropdown = true;
  }
}

}]);

模板

<body ng-controller="Main">
{{title}}
 <div ng-show="isName">
  <label> Name
   <span>
    <button ng-click="hideName()">&times;</button>
   </span>
  </label>
  <div>
   <input/>
  </div>
 </div>

<div ng-show="isDropdown">
 <label> Cars 
  <span>
    <button ng-click="hideDropdown()">&times;</button>
  </span>
 </label>
<div>
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
 </div>
</div>

<div>
 <h5>Add filter</h5>
  <select 
    ng-model="add_filter" ng-selected="selected(add_filter.value)" 
    ng-options="x.text for x in add_options track by x.value">
  </select>
 </div>
</body>

Answer 1

如果删除跟踪，这可以非常简单。您只需考虑ng-show和ng-hide就可以做到这一点。看看下面的代码。您基本上只需正确使用ng-show和ng-hide。这个样本比其他方法更容易遵循。你只需要记住在正确的地方隐藏东西。

angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
  
   $scope.title= "hello";
   $scope.isName = true;
   $scope.isCar = true;
   
   $scope.hideName = function() {
      $scope.isName = false;
    };
    
    $scope.hideCar = function() {
      $scope.isCar = false;
    };

    $scope.getOption = function() {
      var selected = $scope.selected;
      switch(selected) {
        case "Name":
          $scope.isName = true;
          break;
        case "Cars":
          $scope.isCar = true;          
          break;
      }
      $scope.selected = ""; // Reset Drop down
    }

}]);

<!DOCTYPE html>
<html ng-app="app">

<head>
 <link rel="stylesheet" href="style.css" />
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
   <script src="script.js"></script>
</head>

<body ng-controller="Main">
  {{title}}
  <div ng-show="isName">
    <label> Name
      <span>
        <button ng-click="hideName()">&times;</button>
      </span>
    </label>
    <div>
      <input/>
    </div>
  </div>

  <div ng-show="isCar">
    <label> Cars 
      <span>
        <button ng-click="hideCar()">&times;</button>
      </span>
    </label>
    <div>
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </div>

  </div>
  
        <h5>Add filter</h5>
  <select ng-model="selected" ng-change="getOption()">
    <option value=""> </option>
    <option ng-hide="isName" value="Name">Name</option>
    <option ng-hide="isCar" value="Cars">Cars</option>
  </select>


</body>

</html>

Answer 2

[更新]我已经改变了你的功能，现在工作正常。您不应该像使用过的那样在您的情况下使用这样的拼接方法，只要添加交叉按钮，它就会继续添加名称或汽车：

PFB改变后的代码：

$scope.hideName = function() {
  $scope.isName = false;
  $scope.removeFilterOption($scope.isName,"name","Name");
};

$scope.hideDropdown = function() {
  $scope.isDropdown = false;
  $scope.removeFilterOption($scope.isName,"car","Cars");
};

$scope.removeFilterOption = function(value,type,text){
  if($scope.add_options.length>0){
  for(var i=0;i<$scope.add_options.length;i++){
    if(type=='name'){
     $scope.add_options.splice(i,1,{
      text: "Name",
      value: "name"
    });

    }else{
      $scope.add_options.splice(i,1,{
      text: "Cars",
      value: "car"
    });
    }
   }
  }else{
    $scope.add_options.push({
      text:  text,
      value: type
    });

  }

};

这对我来说很好。

Answer 3

有很多更好的方法可以解决这个问题，比如使用'isName'和'isDropDown'，使用像过滤器这样的东西并为'name'和dropdown分配值。

根据Angularjs中的选择选项添加或删除字段

控制器

模板

3 个答案: