如何在带有ng-repeat的角度js表中使用复选框数组和文本区域/下拉列表数组？

Posted 2023-05-07

【中文标题】如何在带有ng-repeat的角度js表中使用复选框数组和文本区域/下拉列表数组？

【英文标题】：How to use array of checkbox and array of text areas/dropdowns in angular js table with ng-repeat?

【发布时间】：2016-06-17 23:32:52

【问题描述】：

我有一个用例，我需要存储哪个员工住在特定城市的哪个酒店进行一些数据处理。我在一个下拉列表中填充了城市，一旦用户选择特定城市，该城市的酒店将填充在另一个下拉列表中。

如果下拉列表中未列出任何酒店，用户需要选中该复选框，以便在下拉列表旁边显示一个文本区域，用户可以在其中输入该员工的酒店名称，该特定员工的下拉列表将被禁用。最初只有 3 个城市时，我能够处理这些东西。但是现在城市和酒店越来越多，我想为此制作一张动态表格。

所以我写了下面的代码，

<tr data-ng-repeat="employee in department.employees">
    <td>
        <input type='checkbox' name="selectedChecks[]" data-ng-model="check" 
        data-ng-change="ShowHide()"/>
    </td>
    <td>employee.empId.employee.empname</td>
    <td>
        <select class="form-control" name="selectedCities[]" data-ng-model="hotelsource" 
            data-ng-options="city.cityname for city in cities" data-ng-disabled="check">
            <option value=''>Select</option>
        </select>
    </td> 
    <td>
        <select class="form-control" name="selectedHotels[]" data-ng-disabled="check" data-ng-model="option" 
                data-ng-options="hotel.hotelname for hotel in hotelsource.hotels">
        <option value=''>Select</option>
        </select>
    </td>
    <td>
        <div data-ng-show="ruleArea">
            <textarea id="txtArea" name="txtAreas[]" rows="3" cols="70"></textarea>
        </div>
    </td>

最初我隐藏文本区域如下，没有如上所示的数组名称，

$scope.ShowHide1 = function () 
    //If DIV is visible it will be hidden and vice versa.
    $scope.ruleArea1 = $scope.check1;
;
$scope.ShowHide2 = function () 
    //If DIV is visible it will be hidden and vice versa.
    $scope.ruleArea2 = $scope.check2;
;
$scope.ShowHide3 = function () 
    //If DIV is visible it will be hidden and vice versa.
    $scope.ruleArea3 = $scope.check3;
;

但是现在有了上面的代码段和只有一个 ShowHide() 函数，我可以禁用下拉菜单但文本区域隐藏显示不起作用。

我对 Angular JS 非常陌生，所以任何人都可以帮助我了解如何显示隐藏此文本区域以及如何获取此选定值？

【问题讨论】：

将元素的 ng-model 定义为数组

@hadiJZ 有什么例子吗？

请显示员工对象。

@hadiJZ "empId":"emp123","empname":"abc","address":"address1","level":"level1"

你看到我的回答了吗？？

【参考方案1】：

试试这个。并且对于其他类似地址的字段定义 ng-model。

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

app.controller("MyCtrl" , function($scope)
  
   $scope.data =
     "employees":[
      "empId":"emp123","empname":"abc","address":"address1","level":"level1",
        "empId":"emp127","empname":"abc1","address":"address2","level":"level2"
       
     ]  
   ;
  
  $scope.check = [true,true];
  
 
  );

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   <table>
     <tr data-ng-repeat="employee in data.employees">
       <td>
        <input type='checkbox' name="selectedChecks[]" data-ng-model="check[$index]" ng-change="ShowHide()" 
        data-ng-change="ShowHide()"/>
    </td>
    <td>
      <div data-ng-show="check[$index]">
           <textarea id="txtArea" name="txtAreas[$index]" ng-model="employee.address" rows="3" cols="70"> </textarea>
        </div>
             
    </td>
     </tr>
   </table> 
    <span>data|json</span>
</div>

【讨论】：

我想要做的是在选中/取消选中复选框时显示/隐藏文本区域。

我放了示例代码。此代码可能是完成您的代码的路线图。

是的，得到了​​解决方案。但是如何在 js 中读取这些下拉列表呢？

【参考方案2】：

您可以使用 $index 在 ng-repeat 中轻松获取数组的索引。

试试这样的：

在你的 html 中

<input type='checkbox' 
       data-ng-model="check[$index]" 
       data-ng-change="ShowHide($index)"/>  // model and change function with $index
<div data-ng-show="ruleArea[$index]">       // get value for this index

在您的角度代码中

$scope.ShowHide = function (index) 
    $scope.ruleArea[index] = $scope.check[index];   // ruleArea and check with index
;

要将值绑定到 department.employees 中的特定员工，请使用 ng-model="employee.hotelsource"、ng-model="employee.option" 等。所以稍后如果您有来自 department.employees 的员工列出您可以访问 employee.hotelsource 的列表。

替代方案：如果您需要将数据分开，则初始化一个数组并按索引绑定。

$scope.employeeData = [];

ng-model="employeeData[$index].hotelsource"

因此，稍后您将拥有一个数组，其中包含您可以通过员工索引访问的值。

【讨论】：

我需要在某处定义索引吗？执行此操作后出现以下错误错误：Va(...) is undefined Wa.prototype.objectIndex/<.assign href="http://localhost:8080/myapp/dist/js/lib/angular.min.js:161:218" rel="nofollow" target="_blank">localhost:8080/myapp/dist/js/lib/angular.min.js:161:218

$index 会自动出现在 ng-repeat 中：docs.angularjs.org/api/ng/directive/ngRepeat 你可能需要像 $scope.check = []; 这样初始化数组$scope.ruleArea = [];

谢谢，答对了一半。按照建议添加了数组，为此 +1。现在，有什么线索可以在 js 中读取这些下拉列表吗？

您是指hotelsource 等吗？您应该将这些值绑定到员工，例如ng-model="employee.hotelsource" 所以稍后在您的员工列表中，您可以从员工中选择hotelsource。

谢谢丽莎，但不幸的是它对我没有用，我在 ng-change 上为两个下拉菜单添加了一种方法，并将索引和 ng-model 值传递给它。然后将这些值存储在 controller.js 中的数组中以供将来处理。