AngularJS-使用多种形式

AngularJS - Using multiple forms

本文关键字：多种形式 AngularJS-      更新时间：2023-09-26

我对AngularJS很陌生，出于好奇的天性，我尝试（并在大多数方面成功）编写一个新闻页面，允许用户对每一篇文章发表评论。

然而，我完全不满意的是，我使用了经典的Javascript来动态地从表单中获取故事；您可以看到，我正在创建使用GetElementById的输入字段。有没有办法通过双向数据绑定来解决这个问题？我最初是这样做的，但我缺乏知识，这意味着模型与这两种形式都有关联；这周围的"角度"是什么？首先，我可以看到addComment函数只是Javascript-我知道我可以在JQuery中更简洁地做到这一点，但我不想这样做。我用一个"注释"就可以了，但不知道如何处理多个。

第二部分是我的表单验证不起作用。我的猜测是我的尝试不太好。

        var app = angular.module("ngStoryTime", []);
        var _stories = [
        {
            Id: 1,
            Title: 'Man Falls Off The World!',
            Body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
            Date: '7 March 2015',
            Images: [],
            Comments: [{ Body:'LOL!', Name:'Michael', Date:'1 April 2015' }, { Body:'Tis a shame that.', Name:'William', Date:'1 April 2015' }]
        },
        {
            Id: 2,
            Title: 'Woman Eats Badger!',
            Body: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
            Date: '8 March 2015',
            Images: [],
            Comments: []
        }
        ];
        app.controller('StoryController', function($scope){
            $scope.pageTitle = 'Welcome to the StoryTime website!';
            //  Initialise the story, and blank Comment property here
            this.Stories = _stories;
            this.addComment = function(story){
                //  Is there a better way to do this??
                var commentValue = document.getElementById('txtComment_' + story.Id);  
                var nameValue = document.getElementById('txtName_' + story.Id);  
                //  Create the object that holds the new comment value  
                var myNewComment = { 
                    Body: commentValue.value, 
                    Name: nameValue.value,
                    Date: '1 May 2015'
                };
                //  Add the comment to the array
                story.Comments.push(myNewComment);
                commentValue.value = '';    
                nameValue.value = '';            
            };
        });
<body ng-controller='StoryController as storyCtrl'>
<h1>{{pageTitle}}</h1>
<!-- Alias the controller for use in this section -->
<div ng-repeat="story in storyCtrl.Stories">
    <!-- For each Story, detail and show it -->        
    <h2>{{story.Title}} </h2>
    <h3>{{story.Date | date:'medium' }}</h3>
    <p>{{story.Body}}
    <div ng-repeat="comment in story.Comments">
        <h4>{{comment.Name}} - {{comment.Date | date:'medium'}} </h4>
        <em>"{{comment.Body}}"</em>
    </div>    
    <!-- Show and hide an introduction depending on if a story has a comment, or not -->
    <h4 ng-show="story.Comments.length > 0">Have a Comment? There are {{story.Comments.length}} comments made so far!</h4>
    <h4 ng-show="story.Comments.length == 0">Have a Comment? Be the first to comment on this excellent piece of journalism</h4>
    <!-- Start of the new form that holds the story's comments, we put the story's Id on all the HtmL so we can get this later, but i'm not sure if this is actually a good idea, yet. -->
    <form name="frmStory_{{story.Id}}" ng-submit="storyCtrl.addComment(story)">   
        Name: <br />
        <input id="txtName_{{story.Id}}" required /><br />    
        Comment:<br/>
        <textarea id="txtComment_{{story.Id}}" required></textarea>
        <button ng-disabled="frmStory_{{story.Id}}.$invalid">Add My Comment</button>
    </form> 
    <hr/>
</div>
</body>

ng-model是这里的一个键。每次ng在给定集合中重复迭代时，它都会为每个重复的html代码分别创建不同的作用域。使用ng-model可以管理给定范围内的数据。

<form name="frmStory_{{story.Id}}" ng-submit="storyCtrl.addComment(story)">   
    Name: <br />
    <input ng-model="story.newComment.Name" required /><br />    
    Comment:<br/>
    <textarea ng-model="story.newComment.Body" required></textarea>
    <button ng-disabled="frmStory_{{story.Id}}.$invalid">Add My Comment</button>
</form>

代码中的第二个：

this.addComment = function(story)

您引用的是控制器的实例，更好的方法是将与视图有连接的所有内容与$scope 绑定

$scope.addComment = function(story)

关于ng模型的更多信息：https://docs.angularjs.org/api/ng/directive/ngModel

理解angular模型和范围系统是理解angular构建应用程序方式的一个巨大里程碑。我鼓励你从这一点开始。

以这种方式在控制器中编写函数：

$scope.yourFunctionName = function () {
}

更多信息请点击此处：https://docs.angularjs.org/guide/controller

至于表单验证失败，你能粘贴一些收到的错误消息吗？

相关文章：