如果ng-repeat中的另一个选择框选中了该项目,则从ng-option中删除/隐藏该项目

时间:2018-08-20 11:59:49

标签: javascript angularjs angularjs-ng-repeat ng-options angularjs-ng-options

如果另一个ng-option选择了ng-repeat,如何从ng-option的ng-option中删除/隐藏该项目?

    <table class="table table-bordered table-condensed">
      <tr>
        <th>Column Name</th>
        <th>Map to field</th>
      </tr>
      <tr ng-repeat="head in headers">
        <td>{{ head }}</td>
        <td>
          <select ng-model="selectedColumn[head]" 
            ng-change="selectColumn(selectedColumn[head])" 
            ng-options="row for row in data">
            <option value="">select</option>
          </select>
        </td>
      </tr>
    </table>

    $scope.headers = ["foo", "bar", "baz"]; 
    $scope.data =["alpha", "beta", "gamma"]; 
    $scope.selectedColumn = {};

    $scope.selectColumn = function(selectedhead) { 
      // $scope.fileData.headers.splice(selectedhead); 
      $scope.data = $scope.data.filter(function(item){ 
        return !selectedhead || !angular.equals(item, selectedhead); 
      }); 
    }

从上面的代码中,该项目已从数据中删除,但是节目select.kind建议,谢谢。

2 个答案:

答案 0 :(得分:0)

上面的代码完成了工作。我假设您的问题是,从$scope.data中删除所有元素后,您不希望用户访问显示“选择”的下拉菜单,对吧?

您需要做的就是在<select>数组为空时禁用$scope.data标签。

下面显示了代码-

var app = angular.module("myApp", []);

app.controller('testCtrl', ['$scope', function ($scope) {
 $scope.headers = ["foo", "bar", "baz"]; 
    $scope.data =["alpha", "beta", "gamma"]; 
    $scope.selectedColumn = {};
		$scope.emptyArr=false;
    $scope.selectColumn = function(selectedhead) { 
      // $scope.fileData.headers.splice(selectedhead); 
      $scope.data = $scope.data.filter(function(item){ 
        return !selectedhead || !angular.equals(item, selectedhead); 
      }); 
      console.log($scope.data);
      if($scope.data==""){    // this disables the <select> tag
      	$scope.emptyArr=true;
      }
    }
   
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="testCtrl">
    <table class="table table-bordered table-condensed">
      <tr>
        <th>Column Name</th>
        <th>Map to field</th>
      </tr>
      <tr ng-repeat="head in headers">
        <td>{{ head }}</td>
        <td>
          <select ng-model="selectedColumn[head]" 
            ng-change="selectColumn(selectedColumn[head])" 
            ng-options="row for row in data" ng-disabled="emptyArr">
            <option value="">select</option>
          </select>
        </td>
      </tr>
    </table>

</div>

希望就是您要的.. 干杯!

〜NiKhIL

答案 1 :(得分:0)

s index.html

lock (imgControl)
{
   tmpBitmapImg = (BitmapSource)imgControl.Source;
}