ng-Modell setzt JavaScript Objekteigenschaft Array

Question

I einen Winkelregler mit einem temporären Objekt currentExpense JavaScript, ein Objekt-Konstruktor TestExpense und Array TestExpenses, auf die neu erstellte Objekte TestExpense werden über eine Funktion submitExpenses geschoben werden. Der Code für diese ist wie folgt:

$scope.currentExpense = { 
     employeeId: 9, 
     date: '', 
     account: '', 
     task: '', 
     expenseType: '', 
     expenseCategory: '', 
     notes: '', 
     amount: '' 
    }; 

function TestExpense(employeeId, date, account, task, expenseType, 
            expenseCategory, notes, amount) { 
    this.employeeId = employeeId; 
    this.date = date; 
    this.account = account; 
    this.task = task; 
    this.expenseType = expenseType; 
    this.expenseCategory = expenseCategory; 
    this.notes = notes; 
    this.amount = amount; 
} 

$scope.TestExpenses = []; 

$scope.submitExpenses = function() { 
    $scope.TestExpenses = []; 
    $scope.TestExpenses.push(
     new TestExpense(
     $scope.currentExpense.employeeId, 
     $scope.currentExpense.date, 
     $scope.currentExpense.account, 
     $scope.currentExpense.task, 
     $scope.currentExpense.expenseType, 
     $scope.currentExpense.expenseCategory, 
     $scope.currentExpense.notes, 
     $scope.currentExpense.amount 
     ) 
    ); 
    console.log($scope.TestExpenses); 
}; 

Eine Nutzung von ng-model aus meiner Sicht wie folgt:

<select multiple="" class="form-control" ng-model="currentExpense.expenseType" 
ng-options="task.expenseTypeId as task.expenseTypeTitle for task in ExpenseTypes" required> 
    </select> 

Und hier sind die relevanten ExpenseType Konstruktor und ExpenseTypes Array:

function ExpenseType(expenseTypeId, expenseTypeTitle) { 
    this.expenseTypeId = expenseTypeId; 
    this.expenseTypeTitle = expenseTypeTitle; 
} 

$scope.ExpenseTypes = []; 

Mein Problem ist, dass beim Protokollieren der Objekte in der TestExpenses Array, ich sehe Arrays für die expenseType Pro perty:

TestExpense 
account:"a" 
amount:"" 
date:"" 
employeeId:9 
expenseCategory: Array[1] 
    0: 2 
    length:1 
__proto__:Array[0] 
expenseType:Array[1] 
    0:4 
    length:1 
__proto__:Array[0] 
notes:"" 

Mein Ziel ist die expenseType Eigenschaft einfach 4 es ist wird derzeit anstelle des Arrays haben eingestellt.

Jeder Rat, wie dies zu erreichen ist, ist sehr willkommen!

Answer 1

Das Problem ist hier. Sie können mehr als 1 Element in der Auswahl auswählen. So wird es die mehr Elemente in der expenseType schieben.

Aber ein Element für Sie einige Logik hier

var expenseType = $scope.currentExpense.expenseType.length === 1 ? $scope.currentExpense.expenseType[0] : $scope.currentExpense.expenseType; 

und dann passieren expenseType zu Ihrem Konstruktor hinzufügen können;

angular.module('myApp',[]).controller('MyCtrl', ['$scope', function($scope){ 
 
    
 
$scope.currentExpense = { 
 
     employeeId: 9, 
 
     date: '', 
 
     account: '', 
 
     task: '', 
 
     expenseType: '', 
 
     expenseCategory: '', 
 
     notes: '', 
 
     amount: '' 
 
    }; 
 
    
 
    $scope.TestExpenses = []; 
 
    
 
    $scope.ExpenseTypes = [ 
 
    new ExpenseType(1, 'First'), 
 
    new ExpenseType(2, 'Second'), 
 
    new ExpenseType(3, 'Third'), 
 
    ]; 
 

 
$scope.submitExpenses = function() { 
 
    
 
    var expenseType = $scope.currentExpense.expenseType.length === 1 ? $scope.currentExpense.expenseType[0] : $scope.currentExpense.expenseType; 
 
    
 
    $scope.TestExpenses.push(
 
     new TestExpense(
 
     $scope.currentExpense.employeeId, 
 
     $scope.currentExpense.date, 
 
     $scope.currentExpense.account, 
 
     $scope.currentExpense.task, 
 
     expenseType, 
 
     $scope.currentExpense.expenseCategory, 
 
     $scope.currentExpense.notes, 
 
     $scope.currentExpense.amount 
 
     ) 
 
    ); 
 
    console.log($scope.TestExpenses); 
 
}; 
 
    
 
    
 

 
}]) 
 

 
function TestExpense(employeeId, date, account, task, expenseType, 
 
            expenseCategory, notes, amount) { 
 
    this.employeeId = employeeId; 
 
    this.date = date; 
 
    this.account = account; 
 
    this.task = task; 
 
    this.expenseType = expenseType; 
 
    this.expenseCategory = expenseCategory; 
 
    this.notes = notes; 
 
    this.amount = amount; 
 
} 
 

 
function ExpenseType(expenseTypeId, expenseTypeTitle) { 
 
    this.expenseTypeId = expenseTypeId; 
 
    this.expenseTypeTitle = expenseTypeTitle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='myApp' ng-controller='MyCtrl'> 
 
    <select multiple="" class="form-control" ng-model="currentExpense.expenseType" ng-click='submitExpenses()' size='3' 
 
ng-options="task.expenseTypeId as task.expenseTypeTitle for task in ExpenseTypes" required> 
 
    </select> 
 
    </div>