如何使用ng-model放置我的数据,即使我没有输入数据

时间:2017-01-27 16:32:46

标签: javascript html angularjs json ajax

单击表列表时,它会将数据传递给input1模态

input1(input1 not editable)

开始输入数据到“#input2”和“#textarea1”时 像我这样的存储数据

{
"input1":"", <--- not displaying
"input2":"inputted data",
"text area":"inputted data"
}

即使不手动输入,如何将input1数据放入storedata。 TNX。

<div ng-controller="myAppCtrl">
<div>
    <!-- table list of data -->
    <tbody>
        <tr>
            <td>data1</td>
        </tr>
        <tr>
            <td>data2</td>
        </tr>
        <!-- some more..... -->
    </tbody>

    <tbody>
        <tr ng-repeat="x in getdata" ng-click="myFunc(x.getinput)">
            <td>{{x.getinput}}</td>
        </tr>
    </tbody>
</div>


<div class="modal fade">
    <div class="modal-content">
        <form class="form-horizontal" ng-submit="submitForm()">
            <div class="form-group">
                <label class="col-sm-3 control-label">input1</label>
                <div class="col-sm-9">
                    <input 
                    id="input1"
                    type="text" 
                    class="form-control" 
                    name="input1" 
                    ng-model="storedata.input1"
                    value="{{param1}}"
                    readonly>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">input2</label>
                <div class="col-sm-9">
                    <input 
                    id="input2"
                    type="text" 
                    class="form-control" 
                    name="input2" 
                    ng-model="storedata.input2"
                    required>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">text area</label>
                <div class="col-sm-9">

                    <textarea 
                    id="textarea1"
                    class="form-control" 
                    name="textarea" 
                    ng-model="storedata.textarea" 
                    required>      
                </textarea>
            </div>
        </div>

        <input type="submit" class="btn btn-primary" value="submit">

        <pre>{{storedata | json}}</pre>
    </form>
</div>

app.controller('myAppCtrl', function($scope,$http,$route){
$scope.myFunc = function(param1){

    $('#modal').modal('show');

    $scope.param1 = param1;


}
$scope.submitForm = function(){

    $http.post('https://some/url', $scope.storedata).
    success(function(data){
        console.log("success!!");

    }).error(function(data){
        console.log("failed!");


    })
}

});

1 个答案:

答案 0 :(得分:0)

如果你想正确使用带有angularJs的模态,你必须使用ui bootstrap模块执行此操作,请参阅https://angular-ui.github.io/bootstrap/。 您可以在以下链接中找到示例: http://dwmkerr.github.io/angular-modal-service/

希望这有帮助!