Question

我无法将表格数据（已完成）绑定到我的控制器。以下是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-sticky">
<div class="container-fluid">
<div class="navbar-header">
   <a class="navbar-brand hidden-sm" href="#myPage">Logo</a>
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav navbar-center">
                <li cl ass="active"><a href="index.php">Home</a></li>
                <li id="nav_about"><a href="about.php">About</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> TEAM <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="teachers_panel.php">Teachers</a></li>
                        <li><a href="students_panel.php">Students </a></li>
                    </ul></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Events <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Upcoming Events</li>
                        <li><a href="sidebar-right.php">1st ACC IT Carnival 2016</a></li>
                        <li class="dropdown-header">Past Events</li>
                        <li><a href="cgc.php">Inter House Cyber Gaming Competition 2015</a></li>
                        <li><a href="tbtt.php">Take Back the Tech </a></li>
                        <li><a href="gbb.php">Google Bus Bangladesh at ACC </a></li>
                        <li><a href="moz.php">Mozcoffee at ACC </a></li>
                        <li><a href="hoc.php">Hour Of Code </a></li>
                        <li><a href="hjfp.php">Club Hangoutat JFP </a></li>
                    </ul></li>  
                <li><a href="u_cons.php">Gallery</a></li>
                <li><a href="u_cons.php">Get Involved</a></li>
                <li><a href="contact.php">Contact</a></li>                    
            </ul>
   </div>
 </div>
</nav>

guardarFoto功能代码：

<form name="form_foto" novalidate>
        <div class="form-group">
            <label>URL de la foto: </label>
            <!--
            <input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg">
            -->
            <input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg" data-ng-model="mifoto.foto" name="foto">
        </div>
        <div class="form-group">
            <label>Lugar: </label>
            <input type="text" required class="form-control" placeholder="Lugar de ejemplo" data-ng-model="mifoto.lugar" name="lugar">
        </div>
        <div class="form-group">
            <label>Año: </label>        
            <input type="text" required class="form-control" placeholder="2016" data-ng-model="mifoto.anio" name="anio">
        </div>
        <!--
        <button class="btn btn-default">Guardar Foto</button>
        -->
        <button class="btn btn-default" data-ng-disabled="datosNoValidos()" data-ng-click="guardarFoto()">Guardar Foto</button>
    </form>

任何帮助将不胜感激。谢谢！

Answer 1

刚刚初始化$scope.mifoto = {} 查看此实例：

＆＃13;

angular.module('app', [])
  .controller('ctrl', ['$scope',
    function($scope) {
      $scope.misFotos = [];
      $scope.mifoto = {};

      $scope.guardarFoto = function() {

        alert($scope.mifoto); //comes out undefined   

        $scope.misFotos.push($scope.mifoto);
        delete $scope.mifoto;

      }
    }
  ])

＆＃13;

<!DOCTYPE html>
<html ng-app="app">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-controller="ctrl">
  <form name="form_foto" novalidate>
    <div class="form-group">
      <label>URL de la foto:</label>
      <!--
            <input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg">
            -->
      <input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg" data-ng-model="mifoto.foto" name="foto">
    </div>
    <div class="form-group">
      <label>Lugar:</label>
      <input type="text" required class="form-control" placeholder="Lugar de ejemplo" data-ng-model="mifoto.lugar" name="lugar">
    </div>
    <div class="form-group">
      <label>Año:</label>
      <input type="text" required class="form-control" placeholder="2016" data-ng-model="mifoto.anio" name="anio">
    </div>
    <!--
        <button class="btn btn-default">Guardar Foto</button>
        -->
    <button class="btn btn-default" data-ng-disabled="datosNoValidos()" data-ng-click="guardarFoto()">Guardar Foto</button>
  </form>
</body>

</html>

＆＃13;

Answer 2

在你的ur函数之外初始化mifoto。

$scope.mifoto = {};

Angujar JS表单问题中未定义的范围

2 个答案: