为什么我不能在js中使用我的表单元素?

时间:2014-02-27 13:30:57

标签: javascript ajax html5 angularjs

我正在尝试在main.js文件中使用$ scope.userForm或$ scope.tform,但似乎它不起作用。它只显示变量未定义,当我确定它时,它显示为空。

    alert($scope.userForm);

有人偶然发现了这种奇怪的行为吗?你能指引我走向正确的解决方案吗?

提前致谢, 利。

我的代码是:

angular.module('MyModule', [], function ($httpProvider) {
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

    // Override $http service's default transformRequest
    $httpProvider.defaults.transformRequest = [function (data) {
        /**
         * The workhorse; converts an object to x-www-form-urlencoded serialization.
         * @param {Object} obj
         * @return {String}
         */
        var param = function (obj) {
            var query = '';
            var name, value, fullSubName, subName, subValue, innerObj, i;

            for (name in obj) {
                value = obj[name];

                if (value instanceof Array) {
                    for (i = 0; i < value.length; ++i) {
                        subValue = value[i];
                        fullSubName = name + '[' + i + ']';
                        innerObj = {};
                        innerObj[fullSubName] = subValue;
                        query += param(innerObj) + '&';
                    }
                } else if (value instanceof Object) {
                    for (subName in value) {
                        subValue = value[subName];
                        fullSubName = name + '[' + subName + ']';
                        innerObj = {};
                        innerObj[fullSubName] = subValue;
                        query += param(innerObj) + '&';
                    }
                } else if (value !== undefined && value !== null) {
                    query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
                }
            }

            return query.length ? query.substr(0, query.length - 1) : query;
        };

        return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
    }];
});
var taxForm = angular.module('taxForm', []);
taxForm.controller('taxInput', function ($scope, $http) {
    $scope.customers = {};
    $scope.loading = true;
    $http.get(url).success(function (response) {
        $scope.customers.list = response;
        $scope.loading = false;
        alert('haha!');
    });
    alert($scope.userForm);
    $scope.submitForm = function ($scope) {
        alert('The form works!\n');
        alert($scope.userForm);
        if ($scope.userForm.$valid) {

        } else {
            alert('The values that youv\'e added are incompatible with our system.');
            console.log($scope.userForm.$error);
        }
    };
});

<body>

<h2>מסמך מס הכנסה</h2>

    <div class="taxForm" ng-app="taxForm">
        <div ng-controller="taxInput">
            <form ng-submit="submitForm()" id="userForm" name="userForm">
                <input type="hidden" value="1" name="type" id="type" ng-model="tform.type" />
                <div class="chooseClient form-group" ng-class="{ 'has-error' : userForm.client.$invalid && !userForm.client.$pristine, 'has-success' : userForm.client.$valid && !userForm.client.$pristine }">
                    <label>לקוח:</label>
                    <select class="form-control">
                        <option ng-repeat="customer in customers.list" ng-value="{{customer.id}}">{{customer.name}}</option>
                    </select>
                    <p ng-show="userForm.client.$invalid && !userForm.client.$pristine" class="help-block">הלקוח שהזנת אינו נמצא במערכת.</p>
                </div>
                <!---<div class="companyName form-group" ng-class="{ 'has-error' : userForm.company.$invalid && !userForm.company.$pristine, 'has-success' : userForm.company.$valid && !userForm.company.$pristine }">
        <label>שם מלא של הלקוח:</label>
        <input type="text" class="form-control" ng-model="tform.fname" ng-minlength="2" ng-maxlength="45"  name="fname" id="fname" />
        <p ng-show="userForm.company.$invalid && !userForm.company.$pristine" class="help-block">השם שהזנת אינו תקין.</p>
    </div>-->
                <div class="companyName form-group" ng-class="{ 'has-error' : userForm.company.$invalid && !userForm.company.$pristine, 'has-success' : userForm.company.$valid && !userForm.company.$pristine }">
                    <label>חברה:</label>
                    <input type="text" class="form-control" ng-model="tform.company" ng-minlength="2" ng-maxlength="45" name="company" id="company" />
                    <p ng-show="userForm.company.$invalid && !userForm.company.$pristine" class="help-block">השם חברה שהזנת אינו תקין.</p>
                </div>
                <div class="address form-group" ng-class="{ 'has-error' : userForm.address.$invalid && !userForm.address.$pristine, 'has-success' : userForm.address.$valid && !userForm.address.$pristine }">
                    <label>כתובת:</label>
                    <input type="text" class="form-control" ng-model="tform.address" ng-minlength="2" ng-maxlength="45" name="address" id="address" />
                    <p ng-show="userForm.address.$invalid && !userForm.address.$pristine" class="help-block">הכתובת שהזנת אינה תקינה.</p>
                </div>
                <div class="city form-group" ng-class="{ 'has-error' : userForm.city.$invalid && !userForm.city.$pristine, 'has-success' : userForm.city.$valid && !userForm.city.$pristine }">
                    <label>עיר:</label>
                    <select class="form-control" ng-model="tform.city" name="city" id="city" min="0" max="999">
                        <option value="1">ירושלים</option>
                    </select>
                    <p ng-show="userForm.city.$invalid && !userForm.city.$pristine" class="help-block">העיר שהזנת אינה תקינה.</p>
                </div>
                <div class="zip_code form-group" ng-class="{ 'has-error' : userForm.zip_code.$invalid && !userForm.zip_code.$pristine, 'has-success' : userForm.zip_code.$valid && !userForm.zip_code.$pristine }">
                    <label>מיקוד:</label>
                    <input type="number" class="form-control" ng-model="tform.zip_code" ng-minlength="2" ng-maxlength="10" name="zip_code" id="zip_code" required/>
                    <p ng-show="userForm.zip_code.$invalid && !userForm.zip_code.$pristine" class="help-block">המיקוד שהזנת אינו תקין.</p>
                </div>
                <div class="biz_number form-group" ng-class="{ 'has-error' : userForm.biz_number.$invalid && !userForm.biz_number.$pristine, 'has-success' : userForm.biz_number.$valid && !userForm.biz_number.$pristine }">
                    <label>עוסק:</label>
                    <input type="number" class="form-control" ng-model="tform.biz_number" name="biz_number" id="biz_number" ng-minlength="6" ng-maxlength="13" required/>
                    <p ng-show="userForm.biz_number.$invalid && !userForm.biz_number.$pristine" class="help-block">המספר עסק שהזנת אינו תקין.</p>
                </div>
                <div class="companyName form-group" ng-class="{ 'has-error' : userForm.date.$invalid && !userForm.date.$pristine, 'has-success' : userForm.date.$valid && !userForm.date.$pristine }">
                    <label>תאריך:</label>
                    <input type="date" class="form-control" ng-model="tform.date" name="date" id="date" required/>
                    <p ng-show="userForm.date.$invalid && !userForm.date.$pristine">התאריך שהנך מנסה להזין שגוי.</p>
                </div>
                <div class="companyName form-group" ng-class="{ 'has-error' : userForm.due_date.$invalid && !userForm.due_date.$pristine, 'has-success' : userForm.due_date.$valid && !userForm.due_date.$pristine }">
                    <label>תאריך פדיון:</label>
                    <input type="date" class="form-control" ng-model="tform.due_date" name="due_date" id="due_date" required/>
                    <p ng-show="userForm.due_date.$invalid && !userForm.due_date.$pristine">התאריך שהנך מנסה להזין שגוי.</p>
                </div>
                <div class="attachedProducts">
                    <fieldset disabled style="display:inline;">
                        <div class="productAttachment form-inline">
                            <div class="copyFromExistingProduct form-group col-xs-4">
                                <select class="form-control" ng-model="tform.products.originalProduct">
                                    <option value="1">- פריט נבחר -</option>
                                </select>
                            </div>
                            <div class="desText form-group col-xs-3">
                                <input type="text" class="form-control" placeholder="תיאור" ng-model="tform.products.des" />
                            </div>
                            <div class="amountNum form-group col-xs-2">
                                <input type="number" class="form-control" placeholder="כמות" ng-model="tform.products.amount" />
                            </div>
                            <div class="priceNum form-group col-xs-2">
                                <input type="number" class="form-control" placeholder="מחיר" ng-model="tform.products.price" />
                            </div>
                            <div class="totalNum form-group col-xs-3">
                                <input type="number" class="form-control" placeholder="מחיר כולל" ng-model="tform.products.totalPrice" />
                            </div>
                            <div class="vatNum form-group col-xs-2">
                                <input type="text" class="form-control" placeholder="מעמ" value="18" ng-model="tform.products.vat" />
                            </div>
                            <div class="totalVatNum form-group col-xs-2">
                                <input type="text" class="form-control" placeholder="כולל מעמ" ng-model="tform.products.totalPriceVat" />
                            </div>
                    </fieldset>
                    </div>
                </div>
                <div class="cacNums form-inline">
                    <div class="vatNum form-group">
                        <label>הנחה:</label>
                        <input type="number" class="form-control col-xs-3" ng-model="tform.discount" max="100" min="0" />
                    </div>
                    <fieldset disabled style="display:inline;">
                        <div class="vatNum form-group">
                            <label>מע"מ:</label>
                            <input type="number" class="form-control col-xs-3" value="18" placeholder="18" ng-model="tform.vat" ng-maxlength="11" />
                        </div>
                    </fieldset>
                    <div class="totalNum form-group">
                        <label>סכום כולל:</label>
                        <input type="number" class="form-control col-xs-3" ng-model="tform.total" ng-maxlength="11" name="total" id="total" required/>
                    </div>
                </div>
                <div class="sendBtn form-group">
                    <input type="submit" class="form-control" value="הכנס מסמך" id="submit" name="submit" />
                </div>
            </form>
<pre style="direction:ltr; text-align: left;">{{ tform | json }}
{{ tform.type = 1 }}
{{ tform.costumer_details = 3}}</pre>

        </div>
    </div>

1 个答案:

答案 0 :(得分:0)

好吧,我解决了。基本上发生的事情是在HTML文件之前加载了main.js,他不知道我试图向他提出什么问题。