Question

我有这个2按钮链接到相同的模态形式。这是表格。

<form name="addUser" ng-submit="(addUser.$valid) ? add() : '';">

    <div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';">
     <label class="control-label" for="username">Username</label>
       <input class="form-control" name="username" ng-model="user.username" required>
        <span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>

    <div class="form-group has-feedback" ng-class="addUser.name.$valid ? 'has-success' : 'has-error';">
      <label class="control-label" for="name">Name</label>
       <input class="form-control" name="name" ng-model="user.name" required>
         <span class="glyphicon form-control-feedback" ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>

     <div class="form-group has-feedback" ng-class="addUser.password.$valid ? 'has-success' : 'has-error';" ng-hide="hideField">
      <label class="control-label" for="password">Password</label>
       <input type="password" class="form-control" name="password" ng-model="user.password" required ng-minlength="5">
         <span class="glyphicon form-control-feedback" ng-class="addUser.password.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>

     <div class="form-group has-feedback" ng-class="addUser.confirmpassword.$valid ? 'has-success' : 'has-error';" ng-hide="hideField">
       <label class="control-label" for="confirmpassword">Re-enter Password</label>
         <input type="password" class="form-control" name="confirmpassword" ng-model="user.confirmpassword" required ng-minlength="5">
           <span class="glyphicon form-control-feedback" ng-class="addUser.confirmpassword.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>

这是按钮。

<div class="col-md-2">
   <button type="button" class="btn btn-primary" ng-click="addUser()">Add New User</button>
    </div>

我想要的是当用户点击此按钮（如下）时，不会出现表格中的密码和确认密码。

<a ng-click="addUser(user)" class="btn"><i class="glyphicon glyphicon-edit"></i></a>

如何禁用该元素？

这是js代码

$scope.addUser = function(user) {
        $dialog.open({
            showClose: false,
            closeByEscape: true,
            template: 'views/user/user-user-add.html',
            controller: ['$scope', function ($dialogScope) {
                $dialogScope.isLoading =false;
                $dialogScope.title = "New User";
                $dialogScope.user = {
                    username : "" ,
                    name : "",
                    password :"",
                    confirmpassword :"",
                    status : "",
                    scope : {},
                };
                if(user){
                    $dialogScope.title = "Update User";
                    $scope.hideField = true;
                    $dialogScope.user = {
                        username :user.username ,
                        name :user.name ,
                        password :user.password,
                        confirmpassword:user.confirmpassword,
                        status : user.status,
                        scope : user.scope,
                    };
                }

                $dialogScope.add = function() {
                    $scope.users.push($dialogScope.user);
                    $dialogScope.closeThisDialog();
                }
            }],
        });
    };

Answer 1

将w_seachString属性添加到ng-disabled为element并将其设置为disabled click

button/anchor

Answer 2

＆＃13;

angular.module("stack", [])
    .controller("move", function($scope) {
        $scope.user = {
            username: '',
            name: '',
            password: '',
            confirmpassword: ''
        };
        // this.apps = features;
        $scope.add = function(user) {
            $scope.hideField = true;
        }
    });

＆＃13;

<!DOCTYPE html>
<html ng-app="stack">

<head>
    <title>stack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- // <script type="text/javascript" src="loadingoverlay.js"></script> -->
    <!--  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <!-- // <script type="text/javascript" src="controller.js"></script> -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body ng-controller="move">
    <form name="addUser">
        <div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';">
            <label class="control-label" for="username">Username</label>
            <input class="form-control" name="username" ng-model="user.username" required>
            <span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="form-group has-feedback" ng-class="addUser.name.$valid ? 'has-success' : 'has-error';">
            <label class="control-label" for="name">Name</label>
            <input class="form-control" name="name" ng-model="user.name" required>
            <span class="glyphicon form-control-feedback" ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="form-group has-feedback" ng-class="addUser.password.$valid ? 'has-success' : 'has-error';" ng-hide="hideField">
            <label class="control-label" for="password">Password</label>
            <input type="password" class="form-control" name="password" ng-model="user.password" required ng-minlength="5">
            <span class="glyphicon form-control-feedback" ng-class="addUser.password.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="form-group has-feedback" ng-class="addUser.confirmpassword.$valid ? 'has-success' : 'has-error';" ng-hide="hideField">
            <label class="control-label" for="confirmpassword">Re-enter Password</label>
            <input type="password" class="form-control" name="confirmpassword" ng-model="user.confirmpassword" required ng-minlength="5">
            <span class="glyphicon form-control-feedback" ng-class="addUser.confirmpassword.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" ng-click="addUser()">Add New User</button>
        </div>
        <a ng-click="add(user)" class="btn"><i class="glyphicon glyphicon-edit"></i></a>
    </form>
    <script type="text/javascript" src="controller.js"></script>
</body>

</html>

＆＃13;

你需要这个吗？@Sue

Answer 3

请运行ng-disabled我已编辑过的表格@Batman的此片段。它在编辑ng-click

上禁用了密码字段

＆＃13;

angular.module("stack", [])
    .controller("move", function($scope) {
        $scope.user = {
            username: '',
            name: '',
            password: '',
            confirmpassword: ''
        };
        // this.apps = features;
        $scope.add = function(user) {
            $scope.hideField = true;
        }
    });

＆＃13;

<!DOCTYPE html>
<html ng-app="stack">

<head>
    <title>stack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- // <script type="text/javascript" src="loadingoverlay.js"></script> -->
    <!--  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <!-- // <script type="text/javascript" src="controller.js"></script> -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body ng-controller="move">
    <form name="addUser">
        <div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';">
            <label class="control-label" for="username">Username</label>
            <input class="form-control" name="username" ng-model="user.username" required>
            <span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="form-group has-feedback" ng-class="addUser.name.$valid ? 'has-success' : 'has-error';">
            <label class="control-label" for="name">Name</label>
            <input class="form-control" name="name" ng-model="user.name" required>
            <span class="glyphicon form-control-feedback" ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="form-group has-feedback" ng-class="addUser.password.$valid ? 'has-success' : 'has-error';">
            <label class="control-label" for="password">Password</label>
            <input type="password" class="form-control" name="password" ng-model="user.password" required ng-minlength="5" ng-disabled="hideField">
            <span class="glyphicon form-control-feedback" ng-class="addUser.password.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="form-group has-feedback" ng-class="addUser.confirmpassword.$valid ? 'has-success' : 'has-error';" >
            <label class="control-label" for="confirmpassword">Re-enter Password</label>
            <input type="password" class="form-control" ng-disabled="hideField" name="confirmpassword" ng-model="user.confirmpassword" required ng-minlength="5">
            <span class="glyphicon form-control-feedback" ng-class="addUser.confirmpassword.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" ng-click="addUser()">Add New User</button>
        </div>
        <a ng-click="add(user)" class="btn"><i class="glyphicon glyphicon-edit"></i></a>
    </form>
    <script type="text/javascript" src="controller.js"></script>
</body>

</html>

＆＃13;

希望它有所帮助。

如果用户单击不同按钮，则禁用表单元素

3 个答案: