Question

这是我的Html代码。有两列包含两个文本字段。如果文本字段中没有值，我需要隐藏按钮。我需要在AngularJS中完成它。这是一个学校项目。请有人帮我这个吗？

<tbody>
    <tr>
        <td data-title="">
            <input class="form-control" type="text" placeholder="" 
                   ng-model="LSex" readonly>
        </td>
        <td data-title="">
            <button ng-click=""><</button>
        </td>
        <td data-title="">
            <button ng-click="">></button>
        </td>
        <td data-title="">
            <input class="form-control" type="text" placeholder="" 
                   ng-model="RSex" readonly>
        </td>
    </tr>
</tbody>

<tbody>
    <tr>
        <td data-title=""><input class="form-control" type="text" 
            placeholder="" ng-model="LWeight" readonly>
        </td>
        <td data-title="">
            <button ng-click=""><</button>
        </td>
        <td data-title="">
            <button ng-click="">></button></td>
        <td data-title=""><input class="form-control" type="text" 
            placeholder="" ng-model="RWeight"  readonly>
        </td>
    </tr>
</tbody>

Answer 1

您可以使用ng-if或ng-show

    <button ng-click="" ng-if="LSex=''" ></button>

或使用

   <button ng-click="" ng-show="LSex=''" ></button>

并查看here

的详细信息

Answer 2

https://plnkr.co/edit/Az7A8onuIm5HLpSEGbO4?p=preview

// Code goes here
var App = angular.module('app', []);
App.controller('ctrl', function($scope) {
  //  $scope.isVisible = true;       
  $scope.data = {
    tester1: ""
  };
  $scope.data1 = {
    tester2: ""
  };
  $scope.enableSave = function(data) {
    return data.tester1.length > 1;
  };
  $scope.enableSaveFun = function(data1) {
    return data1.tester2.length > 1;
  };

});

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   <script src="script.js"></script>
    
  </head>

  <body ng-app="app" ng-controller="ctrl">
   
    <div>
   <input type="text" ng-model="data.tester1">
   <button ng-show="enableSave(data)">test</button>
    
   <input type="text" ng-model="data1.tester2">
   <button ng-show="enableSaveFun(data1)">test</button>
    </div>
  </body>

</html>

Answer 3

如上所述使用ng if或ng show。另外，删除输入中的readonly属性。另外，你不能输入任何文字到输入框，按钮将保持隐藏状态。

angular.module("app",[])
.controller("ctrl",function($scope){
	
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
   <tbody>
      <tr>
         <td data-title=""><input class="form-control" type="text" placeholder="" ng-model="LSex" ></td>
         <td data-title=""><button ng-click="" ng-if="LSex"><</button></td>
         <td data-title="" ><button ng-click="" ng-if="RSex">></button></td>
         <td data-title="" ><input class="form-control" type="text" placeholder=""  ng-model="RSex" ></td>
      </tr>
      <tr>
         <td data-title=""><input class="form-control" type="text" placeholder="" ng-model="LWeight" readonly></td>
         <td data-title=""><button ng-click=""><</button></td>
         <td data-title=""><button ng-click="">></button></td>
         <td data-title=""><input class="form-control" type="text" placeholder="" ng-model="RWeight"  readonly></td>
      </tr>
   </tbody>
</table>
</div>

根据使用角度的文本字段值显示和隐藏按钮

3 个答案: