单击添加按钮后未显示提交按钮（AngularJS）

Question

我有这样的问题 (video)。

我只想这样，如果我单击添加按钮，则表单的提交按钮将直接显示。如果我手动输入内容或粘贴到 textarea 中就可以了。

我的代码是这样的：

<?php
    include('c2gcon.php');
    $nameajax=isset($_REQUEST['nameajax'])?$_REQUEST['nameajax']:null;
    if($nameajax<>null){
        $username=$nameajax;
        $_SESSION['simpanun8']=$_SESSION['simpanun8']."','".$username;
        $_SESSION['simpanun8'][0]='';
        $_SESSION['simpanun8'][1]='';
        echo "$_SESSION[simpanun8]'"; //tanda petiknya tidak boleh dihilangkan, itu penting
        exit;
    }
    include('logincheckadmin.php');
?>
<html>
<head>
    <title>DELETE MULTIPLE RECORD</title>
    <link rel="shortcut icon" href="http://c2gdragonteam.com/img/dragonhead.ico">
    <link href="/css/bootstrap.css" rel="stylesheet">
    <style>
        p,td {
            font-size: 70%;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="ctrljs">
<?php
    $_SESSION['simpanun8']=null;
    $ssloginadmin=$_SESSION['ssloginadmin'];
    $page=isset($_REQUEST['page'])?$_REQUEST['page']:null;
    if($page=='form'){
?>
        <form method='post' name='formupgrade' id='idForm' action='?page=submit' ng-controller='formctrl'>
            <table>
                <tr><td>Username : </td></tr>
                <tr>
                    <td>
                        <select name='username' id='username' ng-model='username' required>
                            <option value='' selected></option>
<?php
                                $q=mysql_query("SELECT username FROM t_un WHERE upgrade='1' and t1count='0' and t2count='0' ORDER BY username");
                                while($f=mysql_fetch_object($q)){
?>
                                    <option value='<?php echo "$f->username";?>'><?php echo "$f->username";?></option>
<?php
                                }
?>
                        </select>
                        <input type='button' value='add' onclick='checkusername();'></input>
                        <input name='forawhile' id='forawhile'></input>
                    </td>
                </tr>
                <tr>
                    <td>
                        <textarea rows='4' cols='50' name='gulungresult' id='gulungresult' placeholder='paste in here' ng-model='gulungresult' required ng-pattern="/^[A-Za-z0-9'/\.\-\s\,]*$/"></textarea>
                    </td>
                </tr>
            </table>
            <input type='submit' value='submit' ng-hide="!formupgrade.$valid"></input>
        </form>
        <br>
        <div id='finallyresult'></div>
<?php
    }
    if($page=='submit'){
        $gulungresult=isset($_REQUEST['gulungresult'])?$_REQUEST['gulungresult']:null;
        //echo "gulungresult=$gulungresult<br>";
        mysql_query("DELETE FROM t_un WHERE username IN(".$gulungresult.")") or die(mysql_error()); 
        echo "<script type='text/javascript'>window.opener.document.location.reload(true);window.close();</script>";
    }
?>
<script>
    function checkusername(){
        var status = document.getElementById("gulungresult");
        var u = document.getElementById("username").value;
        if(u != ""){
            status.innerHTML = "<font color='red'><img src='/img/loading.GIF'></img> checking...</font>";
            var hr = new XMLHttpRequest();
            hr.open("POST", "admintreedelrec.php", true);
            hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            hr.onreadystatechange = function() {
                if(hr.readyState == 4 && hr.status == 200){
                    status.value=hr.responseText;
                }
            }
            var v = "nameajax="+u;
            hr.send(v);
        }
    }
</script>
<script>
    var app = angular.module('ctrljs', []);
    app.controller('formctrl', function($scope, $http){
      $scope.digits = {};
    });
</script>
</body>
</html>

谢谢你帮助我。

Answer 1

如果您希望它正常工作，您必须使用 AngularJS 进行所有表单操作，或者干脆离开 AngularJS。

无论如何，要在 AngularJS 中执行此操作，您必须使用 ngClick 指令而不是使用 onclick，例如：

<form ng-submit="vm.confirmUsers()" name="myForm">
    <select ng-model="vm.username">
        <option>User 1</option>
        <option>User 2</option>
        <option>User 3</option>
        <option>User 4</option>
        <option>User 5</option>
    </select>
    <button ng-click="vm.addUser(vm.username)" type="button" ng-disabled="vm.username == null">Add</button>
    <textarea ng-model="vm.users" required></textarea>
    <button type="submit" ng-hide="myForm.$invalid">Submit</button>
</form>

您必须使用控制器将其添加到您的模型中，而不是使用 onclick=checkUsername();，例如：

vm.addUser = function(username) {
    if (vm.users == null || vm.users.length === 0) {
        vm.users = "'" + username + "'";
    } else {
        vm.users += ", '" + username + "'";  
    }
};

这样，手动输入数据和选择列表添加详细信息的工作方式相同。

但是，不仅onclick 必须删除，您还必须使用 AngularJS 提交表单才能正确完成，使用 ngSubmit。

要发送 HTTP 请求，您可以使用$http 服务，例如：

vm.confirmUsers = function() {
    $http.post('?page=submit', {
        usernames: vm.users
    }).success(function() {
        // What to do if it was successful?
    });
};

这将向您在表单中提供的相同 URL 发布一个 POST 请求，并将用户名（您必须将它们作为参数传递）作为参数添加给它。

无论如何，这里最大的问题是你在这里混合了几个东西，违背了 AngularJS 应用程序中常用的所有原则。但要在这里详细说明所有问题，答案就太长了。