如何在禁用 ng 的情况下使用 ng-if

Question

下面是我的代码。

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

myfriend.controller('myfriendController', function($scope) 
{
   $scope.record = [
       {     "id" : "01",
            "firstname" : "Mohan ",
            "middlename" : "K",
            "lastname" : "Futterkiste1"
        },{
             "id" : "04",
            "firstname" : "Rohan ",
            "middlename" : "A",
            "lastname" : "Futterkiste2"
        },{
              "id" : "08",
            "firstname" : "sohan ",
            "middlename" : "M",
            "lastname" : "Futterkiste3"
        }
   ]
  
                   
});

<html>
  <head>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

  </head>
  <body ng-app="myfriend">
    
        
    
    <table class="table" style="border:1px red solid; width:100%; "  ng-controller="myfriendController">
      <thead>
        <tr>
         <th>Id</th>
          <th>First name</th>
          <th>Middle name</th>
             <th>Last name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in record">
             <th>{{x.id}}</th>
             <th><input type="text" ng-value="x.firstname"></th>
                <th><input type="text" ng-value="x.middlename"></th>
                <th><input type="text" ng-value="x.lastname"></th>
        </tr>
              <tr>
                <td><button> Submit</button></td>
              </tr>
      </tbody>  
 </table> 
  <body>
</html>

我想要的是点击提交按钮，它应该只禁用 Rohan 字段（Rohan 是通过 ng-repeat 来的）。我想通过 ng-if 中的 ng-disabled 来实现。

帮帮我。

Answer 1

我认为，这不可能，因为 ng-if 删除了 html 标签。喜欢

<div ng-if="error">
      <input type="text" ng-disabled="disable">
</div>

它意味着在标签内 div 如果错误 == 真，dom 中不会加载任何内容；所以 ng-disable 在这种情况下不可用。

Answer 2

你可以这样做

<tr ng-repeat="x in record">
   <th>{{x.id}}</th>
   <th><input type="text" ng-model="x.firstname" ng-disabled="x.disabled" value="x.firstname"></th>
   <th><input type="text" ng-model="x.middlename"  value="x.middlename"></th>
   <th><input type="text" ng-model="x.lastname" value="x.lastname"></th>
</tr>

控制器

只需在提交后将禁用属性添加到'Rohan'

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

myfriend.controller('myfriendController', function($scope) 
{

   $scope.record = [
       {     "id" : "01",
            "firstname" : "Mohan",
            "middlename" : "K",
            "lastname" : "Futterkiste1"
        },{
             "id" : "04",
            "firstname" : "Rohan",
            "middlename" : "A",
            "lastname" : "Futterkiste2"
        },{
              "id" : "08",
            "firstname" : "sohan",
            "middlename" : "M",
            "lastname" : "Futterkiste3"
        }
   ]

   $scope.submit = function () {
       angular.forEach($scope.record, function (v) {
          if (v.firstname === 'Rohan') {
              v.disabled = true;
           }
       });
       console.log($scope.record);
   }


});

工作fiddle：JsFiddle

如何在禁用 ng 的情况下使用 ng-if

How to use ng-if with ng-disabled

angularjs

angularjs-ng-repeat

angular-ng-if

angularjs-ng-disabled