NG-模型JavaScript對象屬性設置爲陣列

Question

我有一個臨時JavaScript對象currentExpense，對象構造TestExpense和陣列TestExpenses的角度控制裝置，其新創建的對象TestExpense將通過功能submitExpenses推動。這些代碼如下：

$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); 
}; 

一個在我看來的ng-model用法如下：

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

這裏是相關ExpenseType構造函數和ExpenseTypes陣列：

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

$scope.ExpenseTypes = []; 

我的問題是，在記錄TestExpenses數組中的對象時，我看到數組爲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:"" 

我的目標是讓expenseType財產僅僅是4，而不是它目前被設置爲數組。

任何有關如何完成此操作的建議都非常受歡迎！

Answer 1

問題在這裏。您可以選擇多個項目。所以它會推動expenseType中的更多項目。

但對於一個項目，你可以在這裏添加一些邏輯

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

，然後通過expenseType到你的構造;

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>