简体   繁体   中英

ng-model value not working when I used in Update Data

When i use this code in my controller. I think ng-model can output value based on input right ?

ng-model = "$scope.title"

But when i implementation update data in my code. I'm confused because ng-model can output value but The value still output data.title even though I edited title input.

I edited this form in "tes1234" but the output still "tes"

Anybody to give me solution ? Thanks.

UPDATED

This my HTML code :

<div class="form-group">
<label class="control-label col-md-3">Title</label>
<div class="col-md-6">
<input type="text" name="title" class="form-control" ng-model="title">
</div>
</div>

$scope.result grab data from API and then I use ng-repeat

HttpService("POST", url, param, function(response){

            $scope.parsing = angular.fromJson(response.data);

            $scope.result = {};

            angular.forEach($scope.parsing, function(item){

                $scope.result[item._id] =  item;


            });
        });

This is GetData() to grab data based on clicked and pass in my form

<tbody ng-repeat="data in result">
                        <tr>
                            <td>
                                {{$index + 1}}
                            </td>
                            <td>
                                {{ data._id }}
                            </td>
                            <td>
                                {{ data.title }}
                            </td>
                            <td>
                                {{ data.category.label }}
                            </td>
                            <td>
                                {{ data.user.name }}
                            </td>
                            <td width="20%">
                                <button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
                                <button type="button" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
                            </td>
                        </tr>
                    </tbody>

This is GetData() to grab data based on clicked and pass in my form

$scope.getData = function(data) {

    $scope.title = data.title;

}

And this is my save after data updated

$scope.Save = function() {
    var data = $.param({
           title : $scope.title,
    });

    console.log(data);
};

Data Object Based From API

{
    "status": "200",
    "data": [
        {
            "_id": "589c0484a6551f948e1d6914",
            "parent_id": 0,
            "parent_source": 0,
            "category_id": "58942caba6551fd2c3347371",
            "user_id": "58942d43a6551fd7123bdcb1",
            "active": 1,
            "status": 1,
            "title": "coba tes",
            "description": "coba tes",
            "url": "coba-tes_6llapm",
            "extra": "EXTRA",
            "responded": "2017-02-09 12:56:20",
            "level": 0,
            "editor_pick": 0,
            "up_vote": 0,
            "down_vote": 0,
            "revision": 0,
            "answer_count": 2,
            "updated_at": "2017-02-09 13:04:14",
            "created_at": "2017-02-09 12:56:20",
            "tags": [],
            "user": {
                "_id": "58942d43a6551fd7123bdcb1",
                "status": 1,
                "username": "asdasdad",
                "email": "asdasdasd@gmail.com",
                "image": "https://scontent.xx.fbcdn.net/v/t1.0-1/p50x50/16299070_1114043338706757_6701359761657365227_n.jpg?oh=7ed22de2d576dc9d3cfd6a89aa386153&oe=5942BC1F",
                "about": "ini saya, saya suka makan dan belanja",
                "ref_id": "https://www.facebook.com/app_scoped_user_id/1104332756344482/",
                "name": "asdasd",
                "login_ip": "192.168.100.4",
                "notif_check": "2017-02-03 14:12:03",
                "token": "$2y$10$EMGp1wWnnPUDRJ/dSybCIeei88jROcAqsAsgXri2l8j/H8FMSt5iS",
                "updated_at": "2017-02-10 10:52:33",
                "created_at": "2017-02-03 14:12:03"
            },
            "category": {
                "_id": "58942caba6551fd2c3347371",
                "label": "My Kids and I",
                "active": 1,
                "url": "my-kids-and-i",
                "parent_id": 0,
                "level": 0,
                "dfp_interest": "[]",
                "meta_title": "",
                "meta_description": "",
                "meta_keyword": "",
                "updated_at": "2017-02-03 14:09:31",
                "created_at": "2017-02-03 14:09:31"
            }
        }]
}

只需将var data = $.param... $scope.data=$.param... var data = $.param...更改为$scope.data=$.param...

I have added demo.

 var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $scope.result = { "status": "200", "data": [{ "_id": "589c0484a6551f948e1d6914", "parent_id": 0, "title": "coba tes", }] } $scope.getData = function(data) { console.log(data); $scope.title = data.title; }; $scope.save = function() { console.log($scope.title); $scope.title; } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <div ng-app="myApp" ng-controller="customersCtrl"> <div class="form-group"> <label class="control-label col-md-3">Title</label> <div class="col-md-6"> <input type="text" name="title" class="form-control" ng-model="title"> </div> </div> <table> <tr ng-repeat="data in result.data"> <td> {{$index + 1}} </td> <td> {{ data._id }} </td> <td> {{ data.title}} </td> <td> {{ data.category.label }} </td> <td> {{ data.user.name }} </td> <td width="20%"> <button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button> <button type="button" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button> </td> </tr> </table> <button type="button" class="btn btn-primary" ng-click="save()"><i class="fa fa-edit"></i> Save</button> </div> 

change the getDate Function like this

$scope.getData = function(data) {
    $scope.title = data[0].title;
 }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM