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

最后，我得到了解决方案。我只声明了 options 变量的数组数据类型，即

$ 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 roy

无法创建对象数组以从AngularJS保存MongoDB

1 个答案: