無法創建對象的數組來保存從AngularJS的MongoDB

Question

我已經動態地創建了html並且想要使用來自AngularJS的Mongoose保存在MongoDB中。但問題是，我無法創建需要我創建了Mongoose模式的對象。

模型代碼

var SegmentSchema = new Schema({ 
    name: String, 
    uiName:String, 
    type:String, 
    lower:Number, 
    upper:Number, 
    options:[{key:String,value:String}] 
}); 

export default mongoose.model('Segment', SegmentSchema); 

視圖代碼

<form class="form-horizontal" ng-submit="addSegment()"> 
    <div class="form-group"> 
    <label class="col-sm-2 control-label">Name</label> 
    <div class="col-sm-6"> 
     <p class="form-control-static"><input class="form-control" type="text" required ng-model="segment.name" name="name" value=""></p> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputPassword" class="col-sm-2 control-label">UI Name</label> 
    <div class="col-sm-6"> 
     <input class="form-control" type="text" ng-model="segment.uiName" name="uiName" value=""> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputPassword" class="col-sm-2 control-label">Type</label> 
    <div class="col-sm-6"> 
     <select ng-model="segment.type" ng-change="changeType()" class="form-control" name="type"> 
     <option value="">---select type---</option> 
     <option value="text">Text</option> 
     <option value="range">Range</option> 
     <option value="select">Select</option> 
     <option value="binary">Binary</option> 
     </select> 
    </div> 
    </div> 
    <div ng-show="rangeShow" class="form-group"> 
    <label for="lower_range" class="col-sm-2 control-label">Lower Range</label> 
     <div class="col-sm-6"> 
     <input class="form-control" ng-model="segment.lower" type="number" name="lower" value=""> 
     </div> 
    </div> 
    <div ng-show="rangeShow" class="form-group"> 
    <label for="lower_range" class="col-sm-2 control-label">Lower Range</label> 
     <div class="col-sm-6"> 
     <input class="form-control" ng-model="segment.upper" type="number" name="upper" value=""> 
     </div> 
    </div> 
    <div ng-show="numOptionShow" class="form-group"> 
    <label for="inputPassword" class="col-sm-6 control-label"></label> 
    <div class="col-sm-2"> 
    <input placeholder="Options count" class="form-control col-sm-3" ng-keydown="keyupOptionNumber()" ng-keyup="keyupOptionNumber()" ng-model="numOption" type="text" value=""> 
    </div> 
    </div> 
<div ng-show="selectOptionShow" class="" id="segment-select-option"> 

</div> 
<div class="form-group"> 
    <button type="submit" ng-show="addSegmentBtn" class="btn btn-success">Add</button> 
</div> 
</form> 

angularjs（控制器）代碼：

angular.module('nrichApp') 
.controller('SegmentCtrl', function ($scope,$http,segment) { 
    $scope.loading = true; 
    $scope.addSegmentDiv=false; 
    segment.get().success(function(data) { 
    $scope.segments=data; 
}); 
$scope.loading = false; 
}) 
.controller('AddSegmentCtrl', function ($scope,segment,$location,$compile) { 
    $scope.loading = true; 
    $scope.addSegmentBtn=false; 
    $scope.changeType=function(){ 

    $scope.addSegmentBtn=true; 
    $scope.rangeShow=false; 
    $scope.selectOptionShow=false; 
    $scope.numOptionShow=false; 
    switch ($scope.segment.type) { 
    case 'range': 
     $scope.rangeShow=true; 
     break; 
    case 'select': 
    $scope.numOptionShow=true; 
     break; 
     case 'binary': 
     break; 
    default: 

    } 
}; 
$scope.keyupOptionNumber=function(){ 
    console.log($scope.numOption); 
    $scope.selectOptionShow=true; 
    var input =''; 
    for (var i = 0; i < $scope.numOption; i++) { 
    input+='<div class="form-group">'; 
     input+='<label for="option_key" class="col-sm-2 control-label">Key</label>'; 
     input+='<div class="col-sm-2"><input ng-model="segment.options[' + i + '].key" class="form-control" type="text" name="key" value=""></div>'; 
     input+='<label for="option_value" class="col-sm-1 control-label">Value</label>'; 
     input+='<div class="col-sm-3"><input ng-model="segment.options[' + i + '].value" class="form-control" type="text" name="value" value=""></div>'; 
    input+='</div>'; 
    } 

    var eleDiv=angular.element(document.querySelector('#segment-select-option')); 
    eleDiv.html(input); 
    $compile(eleDiv)($scope); 

}; 
$scope.addSegment=function(){ 
    $scope.loading = true; 
    var param = {'segment' : $scope.segment}; 
    console.log(JSON.stringify(param));//it is output which show at below 
    segment.create(param) 
    .success(function(data) { 
     $scope.loading = false; 
     $location.path('/segment'); 
    }); 
    $scope.loading = false; 
}; 

}）;

輸出：

{ 
    "segment":{ 
    "type":"select", 
    "name":"range2", 
    "uiName":"Select 3", 
    "options":{ 
     "0": { "key":"k3","value":"v2"}, 
     "1": { "key":"k4","value":"v4"} 
    } 
    } 
} 

所需的輸出：

{ 
    "segment": { 
    "type":"select", 
    "name":"range2", 
    "uiName":"Select 3", 
    "options": [ 
     {"key":"k3","value":"v2"}, 
     {"key":"k4","value":"v4"} 
    ] 
    } 
} 

Answer 1

最後，我得到了解決。我只聲明數組數據類型爲選項變量即

$ scope.options = []

內部角控制器：

$scope.keyupOptionNumber=function(){ 

    $scope.options=[];//Here, this line is missing 

    console.log($scope.numOption); 
    $scope.selectOptionShow=true; 
    var input =''; 
    for (var i = 0; i < $scope.numOption; i++) { 
    input+='<div class="form-group">'; 
     input+='<label for="option_key" class="col-sm-2 control-label">Key</label>'; 
     input+='<div class="col-sm-2"><input ng-model="segment.options[' + i + '].key" class="form-control" type="text" name="key" value=""></div>'; 
     input+='<label for="option_value" class="col-sm-1 control-label">Value</label>'; 
     input+='<div class="col-sm-3"><input ng-model="segment.options[' + i + '].value" class="form-control" type="text" name="value" value=""></div>'; 
    input+='</div>'; 
    } 

    var eleDiv=angular.element(document.querySelector('#segment-select-option')); 
    eleDiv.html(input); 
    $compile(eleDiv)($scope); 

}; 

由於@shaishab羅伊