使用Angular JS从多个行输入字段创建JSON对象

时间:2015-02-11 07:51:47

标签: javascript jquery json angularjs

多行输入字段是

enter image description here

使用jQuery我创建了一个派生JSON的方法

function createReminderJSON() {
         jsonObj = [];
        $("input[class=occasion]").each(function() {

            var occasion = $(this).val();

            if ('' !== occasion) {
                var fname = $('.fname').val();
                var lname = $('.lname').val();

                item = {}
                item["occasion"] = occasion;
                item["firstName"] = fname;
                item["lastName"] = lname;

                jsonObj.push(item);
            }

        });
        console.log(jsonObj);
        $.ajax({
            type : "post",
            contentType : "application/json",
            url : "/add/reminder",
            data : JSON.stringify(jsonObj)
        }); 
    }

创建的JSON是

[{occasion:1,firstName:Tim,lastName:Cook},{occasion:1,firstName:Steve,lastName:Jobs}]

输入字段的HTML:

<tr>
    <td><input type="text" name="occasion" placeholder="occasion" class="occasion" ng-model="rem.occasion"/></td>
    <td><input type="text" name="firstName" placeholder="fname" class="fname" ng-model="rem.firstName"/><td>
    <td><input type="text" name="lastName" placeholder="lname" class="lname" ng-model="rem.lastName"/><td>
</tr>

ng-click=addReminder()上调用的Angular JS方法是

function Reminder($scope,$http){
        $scope.addReminder = function() {
            var reminders = $scope.rem;
            alert(reminders);
            $http.post('/add/reminder', reminders).success(function(data) {
                alert("Success!");
            });
        }
    }

angular.forEach是否必要?如何使用Angular JS silmilar为jQuery创建JSON。当我尝试使用单行输入时,警报正在给我undefined

2 个答案:

答案 0 :(得分:1)

您只需要在控制器中声明一个空对象。

$scope.rem = {};

答案 1 :(得分:0)

不,不是。请记住,JSON代表Javascript Object Notation。这是描述对象的方式。因此,AngularJS控制器中的模型 - 只要它们通过电线进行序列化即可。例如,通过POST,看起来像你想要的JSON。

这是一个演示:http://jsfiddle.net/358uqccy/3/的小提琴。 | json过滤器将对象转换为JSON,以向您显示模型的JSON始终可用。