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>