如何以角度填充表单?

时间:2017-06-16 07:04:20

标签: javascript html angularjs forms

我有一个表单application.html,我用它来创建应用程序xml。现在我重复使用相同的表单来编辑应用程序。 这是我的方法:

有一个表单aplication.html及其tabs.js文件。 application.html包含输入字段等。

tabs.js看起来像是:

    app.controller('RegisterCtrl', function($scope, $http) {
            $scope.inputLocation = '';
            $scope.form = {
                appName: ' ',
                appOwnerEmail: '',
                feedFileType: '',
                feedFileLocation: '',
                inputType: 'csv',
                validationDetails: [{
                    feedFileName: '',
                    dataTypes: '',
                    skipLinesFromTop: '',
                    skipLinesFromBottom: '',
                    headerRowsNumbers: ''
                }]
            };
 // this function is still incomplete, I need the logic here to populate  
    $scope.populateValues = function(appName,form){
                alert(appName);

                $scope.form.appOwnerEmail = 'gaurav@gmail.com';
                console.log($scope.form.appOwnerEmail);
            };      
    });

还有另一个文件EditApplication.html及其selectApp.js文件 在EditApplication中,有一个下拉菜单可以选择应用程序和一个按钮"编辑"。

当我们点击按钮时,它将包含application.html表单并将显示。

<div ng-controller="RegisterCtrl">
    <div ng-controller="selectApp">
        <h4 ng-show="displayValue.selectAppPage == 'true'">Select and Edit the Application</h4>

        <div class="well container" ng-show="displayValue.selectAppPage == 'true'">
            <div class="row pager pull-center">
                <div class="span11">
                    <label class="control-label" for="selecttheApplication">Select the Application</label>

                    <select id="selectApplication" ng-model="fileData.selectApplication"
                    ng-options="option for option in fileData.availableOptions"
                    class="selectpicker">
                        <option value="" selected="selected">Select Option</option>
                    </select>
                </div>
            </div>
            <div class="pager pull-right">
                <input type="button" class="btn" value="Cancel"
                />
                <input type="button" class="btn" value="Edit"
                ng-click="editApp()" />
            </div>
        </div>
        <div ng-show="displayValue.editPage == 'true'"
        ng-switch on="fileType">
            <div ng-switch-when="csv">
                <div ng-include="'application.html'"
                ng-init="populateValues(fileData.selectApplication,form)"></div>
            </div>
            <div ng-switch-when="text">
                <div ng-include="'runApplication.html'"></div>
            </div>
        </div>

selectApp.js看起来像:

angular.module("routedTabs").controller("selectApp", function($scope,$http){        
    $scope.displayValue = {
            editPage:'false',           
            selectAppPage:'true'
    };
//edit application scope
    $scope.editApp = function(){    
        alert("All is well!");
        $scope.fileType = 'csv';            
        $scope.toggleDisplay();         
    };

现在,当我在populateValues()函数中为表单属性赋值时,它在application.html表单中不可见。 我做错了什么或遗失了什么?因为我没有收到任何错误。

0 个答案:

没有答案