【问题标题】:AngularJS ng-model cannot bind input valueAngularJS ng-model 无法绑定输入值
【发布时间】:2021-01-19 21:15:56
【问题描述】:

我的页面中有一个input,它的值通过+- 按钮改变, 此输入包含指令 ng-model 以将其值传递给角度控制器 js 文件 在 MYSQL 数据库

中有一个指向submit input 值的按钮

问题是每次我按下submit 按钮时,插入数据库的值都会返回

我如何将通过按钮更改的input 的值分配给ng-model??

index.php 文件:

<!-- October Evaluation Start -->
    <div class="row">

      <div class="card shadow mb-4" style="width: 900px;">
        <div class="card-header py-3">
          <div class="row">
            <div class="col">
              <h6 class="m-0 font-weight-bold text-primary">October evaluation</h6>
            </div>
            <div class="col"><button id="plus11" class="btn btn-info text-right">Add new</button>
            </div>
          </div>
        </div>



        <div class="card-body">
          <form>
          <div class="form-group">
            <label for="exampleFormControlSelect1">select user</label>
            <select class="form-control" id="exampleFormControlSelect1" ng-model="gid">
              <?php
              $con = mysqli_connect("localhost","root","","users");
              $sql = mysqli_query($con, "SELECT name From myusers");
              $row = mysqli_num_rows($sql);
              while ($row = mysqli_fetch_array($sql)){
              echo "<option value='". $row['name'] ."'>" .$row['name'] ."</option>" ;
              }
              ?>

            </select>
          </div>
          <br>
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Evaluation</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>
                <div class="input-group">
    <span class="input-group-btn">
        <button type="button" class="btn btn-danger btn-number"  data-type="minus" data-field="quant[2]">
          <span><i class="fas fa-minus"></i></span> 
        </button>
    </span>
    <input type="text" id="trig" name="quant[2]" class="form-control input-number" value="1" min="1" max="5" ng-model="onoctober">
    <span class="input-group-btn">
        <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]">
            <span><i class="fas fa-plus"></i></span>
        </button>
    </span>
</div>

                </td>
              </tr>

            </tbody>
          </table>
          <input type="button" value="submit" class="btn btn-primary" ng-click="insertEval()" />
          </form>
        </div>
      </div>

    </div>
    <!-- October Evaluation End -->
    <br><br>

AngularJS 控制器 js 文件:

var app = angular.module("myApp", []);

app.controller('userEval', function ($scope, $http) {

$scope.insertEval = function () {
    $http.post(
        "inserteval.php",
        {
            'gid': $scope.gid,
            'onoctober': $scope.onoctober,
           
         }).success(function (data) {
            alert(data);
           
        });


}

});

inserteval.php 文件:

<?php

$connection = mysqli_connect("localhost","root","","users");
$data  = json_decode(file_get_contents("php://input"));

if(count($data)>0)
{
     $gid = mysqli_real_escape_string($connection,$data->gid);
     $onoctober = mysqli_real_escape_string($connection,$data->onoctober);


     $query = "INSERT INTO `myusers`(`name`, `on-october`) VALUES ('$gid','$onoctober')";


if(mysqli_query($connection,$query)){

echo "Done , new User added !";
}else {
 echo "Error add !";
}

}

?>

图片说明

【问题讨论】:

  • 您没有在 HTML 模板中绑定 ng-app 和 ng-controller。尝试将 &lt;div class="row" ng-app="myApp" ng-controller="userEval"&gt; ... &lt;/div&gt; 添加到 HTML 模板的父级。

标签: javascript php angularjs


【解决方案1】:

为了支持@Sujay Subrahmanya,您必须告知您的 html 文件它是哪个应用程序和哪个控制器的一部分。这是通知它的语法

<body ng-app="myApp" ng-controller="userEval">
   <!-- Put your index.php content -->
</body>

【讨论】:

    猜你喜欢
    • 2016-11-18
    • 2013-03-13
    • 1970-01-01
    • 1970-01-01
    • 2015-12-05
    • 1970-01-01
    • 2017-08-04
    • 2018-12-30
    • 1970-01-01
    相关资源
    最近更新 更多