javascript - 单击表格行时，它会启用整个表格而不是一行，并且在选择获取值后取消定义

Question

我有一个带有选择选项下拉列表的表格。此表格默认禁用，当我单击表格行按钮时，该行应该启用，我可以选择值并将其发送到 Controller 以进行 post api 负载加载。

问题是，当我单击行时，它会启用包含该特定行的整个表格。我在这个 able 中使用 $index选择选项下拉列表我必须通过比较两个 json 数据 api 创建，问题是在选择值后它显示我未定义的所选值，

JS

         var mockData =[{
   field1: "Jason Bowman",
    "field2": "Account Representative III",
    "field3": "Brainlounge"
  }, {
    "field1": "John Diaz",
    "field2": "Tax Accountant",
    "field3": "Tagchat"
   }, {
"field1": "Sean Bailey",
    "field2": "Senior Developer",
    "field3": "Voonder"
  }, {
    "field1": "Annie Parker",
    "field2": "Structural Analysis Engineer",
    "field3": "Mybuzz"
}, {
"field1": "Wanda Webb",
    "field2": "Biostatistician I",
    "field3": "Realcube"
    }, {
"field1": "Jose Burton",
    "field2": "Staff Accountant I",
    "field3": "Npath"
 }];

         var emplyeeTable  =[{
"name ": "Jason Bowman",
    "ocupation": "Account Representative III",
    "company": "Brainlounge",
    "id":1
      }, {
"name": "John Diaz",
    "ocupation": "Tax Accountant",
    "company": "Tagchat",
    "id":2
      }, {
"name": "Sean Bailey",
    "ocupation": "Senior Developer",
    "company": "Voonder",
    "id":3}, {
     "name": "Annie Parker",
    "ocupation": "Structural Analysis Engineer",
    "company": "Mybuzz",
    "id":4
     }, {
    "name": "Wanda Webb",
      "ocupation": "Biostatistician I",
      "company": "Realcube",
     "id":5
       }, {
       "name": "Jose Burton",
      "ocupation": "Staff Accountant I",
      "company": "Npath",
      "id":6
       }];


   var App = angular.module('myApp', []);

    function DataCtrl($scope, $http) {
      $scope.data = mockData;
      $scope.emplyeeTableData = emplyeeTable;
      $scope.isDisable = true;
      $scope.click = function(index){
      $scope.isDisable = false;
      }
       $scope.save= function(index ,id,name ){
       var data ={
        "id" :id
        "name":name 
         }
      }
      }
       HTML
             <div ng-app='myApp'>
            <div ng-controller='DataCtrl'>
            <button ng-click="loadData()">load data</button>

            <h1>Data</h1> 

        <table class="table" >
            <tr ng-repeat="key in data" ng-init ="vm = $index">
                <td>
                  <select ng-disabled ="isDisable">
                    <option ng-repeat=" emp in emplyeeTableData"   ng-selected="emp.name == 
                   key.field1" value ="{{emp.id}}">{{emp.company}}</option>
                  </select>
                </td>
                <td><select ng-disabled ="isDisable">
                    <option ng-repeat=" emp in emplyeeTableData"   ng-selected="emp.ocupation == 
                     key.field2" value ="{{emp.id}}">{{emp.ocupation}}</option>
                  </select></td>
                <td><button ng-click="click(vm)">
                click
                </button><button ng-click="save(vm, emp.name ,emp.id)">
                click
                </button></td>
                    </tr></table>
              </div></div>


      CSS

      table ,tr , td {
          border :1px solid red
      }
      selecte:disabled {
     color: gray;
     cursor:no-drop; 
     }

我试过使用 ng-option 不工作。我没有明白我做错了什么。

Answer 1

你犯了一个简单的错误，当你调用“点击”函数时，你正在传递索引并且你只是设置“$scope.disable = false; ”，因此它启用了代码中的所有选项“$scope.isDisable”是一个全局变量，因此您需要进行简单的更改:

1. 在 HTML 中调用“click”函数时，您需要从第一个“ng-repeat”传递“key”，而不是将“vm”作为参数传递给 click 函数。

   <

2. 在“$scope.click()”函数中，创建一个名为“enableRow”的新 bool 键并将其标记为 true。那么你的点击功能就是这样的。

$scope.click = function(empObject){        
   empObject.enableRow = true;
}

1. 最后在 HTML 中，不要使用 'ng-disabled ="isDisable"'，而是使用 * ng-disabled ="!key.enableRow"*，因为 angularjs 的 2 路绑定(bind)属性，只要您调用点击功能并将 enableRow 设置为 true，它就会反射(reflect)在 UI 中。

有关您的问题的工作演示，请单击此链接:Working Demo

如果这有帮助，请告诉我。