Question

我是angularjs的新手。所以从YouTube开始，我正在尝试开发我的第一个angularjs应用程序。但是我被困在视频的第25分钟，导师基本上试图将<?xml version="1.0" encoding="utf-8"?> <mvx:MvxContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:forms="using:Xamarin.Forms" xmlns:mvx="clr-namespace:MvvmCross.Forms.Core;assembly=MvvmCross.Forms" x:Class="MvvmForms.MySampleApp.Core.Pages.LoginPage" Title="Login Page" > <mvx:MvxContentPage.Padding Thickness="5, 0, 5, 95"> <OnPlatform x:TypeArguments="Thickness"> <On Platform="Android" Value="5, 0, 5, 0" /> <On Platform="iOS" Value="5, 20, 5, 0" /> </OnPlatform> </mvx:MvxContentPage.Padding> <StackLayout Spacing="10" Orientation="Vertical"> <Label FontSize="24" Text="Enter your nickname in the box below" /> <Entry Placeholder="Who are you?" TextColor="Red" Text="{Binding YourNickname}" /> <Label FontSize="24" Text="{Binding Hello}" /> <Button x:Name="LoginButton" Text="Login" Command="{Binding ShowMainPageCommand}" /> </StackLayout>用户按钮与控制器绑定，他能够这样做。数据以数组的形式提交给控制器。但是当我尝试做同样的事情时，我得到一个空数组。为什么呢？

JS版：：Save bootstrap-3.3.7

的index.html

angularjs 1.6.4

我的 app.js 是

<!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">New Users Registration</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="control-label col-sm-2">Username</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" ng-model="newuser.username">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-sm-2">Email</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" ng-model="newuser.email">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-sm-2">Full Name</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" ng-model="newuser.fullname">
                </div>
              </div>
              <div class="form-group"> 
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-default" ng-click="saveuser()" data-dismiss="modal">Save</button>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

Answer 1

您可以尝试将用户作为参数传递给函数：

    <div class="col-sm-offset-2 col-sm-10">
       <button type="submit" class="btn btn-default" ng-click="saveuser(newuser)" data-dismiss="modal">Save</button>
    </div>  

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

myApp.controller('myController',function($scope){
  $scope.newuser = {};
  $scope.users = [
    {username:"Satya",fullname:"Satya",email:"satya@gmail.com"}
  ];
  $scope.saveuser = function(newuser){
    $scope.users.push(newuser);
    $scope.newuser = {};
  };
});

Answer 2

好的，这是我的错。显然，输入类型应为text类型。在我的HTML文件中，我将其保留为email类型。改变它解决问题。我不确定，但这可能是bootstrap，它在处理之前验证表单数据。

无法使用angularjs在控制器中获取表单数据？

2 个答案: