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属性的数组：

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>

ng-model将JavaScript对象属性设置为数组

1 个答案: