ng使用angular模板变量提交HTML属性

时间:2016-08-04 15:01:31

标签: html angularjs forms

我有两种方法ngMake和ngUpdate。我有一个表格,PostForm。我想重用相同的表单,但根据网址添加不同的功能。 我使用

获取有关网址的信息

控制器

if ($location.path() === '/makepost') {
    $scope.FormTitle = 'Make a Post';
    $scope.FormAction = 'server/blog/makepost.php';
    $scope.FormMethod = 'POST';
    $scope.FormSubmit = "ngMake()"
};
if ($location.path().indexOf('update') !== -1) {
    $scope.FormTitle = 'Update a Post';
    $scope.FormAction = null;
    $scope.FormMethod = 'POST';
    $scope.FormSubmit = "ngUpdate()";
};

HTML表格

<div ng-controller="BlogController as blog">
<h3 class="text-center">{{FormTitle}}</h3>
<form ng-show='user != null' ng-submit="{{FormSubmit}}" role="form" class="form-group" name="PostForm">
    <label>Title: </label>
    <div ng-class="(PostForm.Title.$dirty && PostForm.Title.$invalid) ? 'has-warning' : 'has-success'" class="form-group has-feedback">
        <input data-ng-model="post.Title" data-ng-minlength="3" data-ng-maxlength="255" name="Title" type="text" class="form-control" placeholder="Title" required/>
        <span ng-class="(PostForm.Title.$dirty && PostForm.Title.$invalid) ? 'glyphicon-warning-sign' : 'glyphicon-ok'" class="glyphicon form-control-feedback"></span>
    </div>
    <label>Content: </label>
    <div ng-class="(PostForm.Content.$dirty && PostForm.Content.$invalid) ? 'has-warning' : 'has-success'" class="form-group has-feedback">
        <textarea data-ng-model="post.Content" rows="8" name="Content" type="text" class="form-control" placeholder="Content" required></textarea>
        <span ng-class="(PostForm.Content.$dirty && PostForm.Content.$invalid) ? 'glyphicon-warning-sign' : 'glyphicon-ok'" class="glyphicon form-control-feedback"></span>
    </div>
    <div ng-controller="AuthController as auth">
        <input class="ng-hide" type="number" data-ng-model="post.UserID" name="UserID" value="{{user.ID}}">
    </div>
    <br>
    <input type="submit" ng-class="(PostForm.$valid) ? 'btn-success' : 'disabled'" class="btn btn-block btn-default">
</form>
<p ng-show='user == null' class="text-center">You must be <a href="#/login">logged in</a> in order to {{FormTitle | lowercase}}</p>

Explination

{{FormSubmit}}模板变量可能会在之后执行,并导致一个不允许表单执行的问题。我愿意接受建议,我想重用相同的表格。我读到ngSubmit需要一个类型=&#34;提交&#34;表单标签中包含的按钮或输入元素,我有。我没有任何可能阻碍表单的ng-clicks。

我愿意接受建议

如果表单或整个项目有任何其他问题,请告诉我,即使它只是一个&#34;更好的练习&#34;。

完整项目

https://github.com/AquaSolid/RAMA_Angular_PHP

1 个答案:

答案 0 :(得分:1)

基本上,我好意思。我在后端包含了逻辑。我创建了一个函数来选择要使用的函数。同时,表单包含属性ng-submit="chooseSubmit()"。这是关于它..

$scope.chooseSubmit = function() {
    if ($scope.FormSubmit) {
        if ($scope.FormSubmit === 'ngMake()') {
            $scope.ngMake();
        } else {
            $scope.ngUpdate();
        };
    }
};