2016-07-08 274 views
0

我有下面的代碼,網頁上填入一定的選擇項使用JSON對象:默認選擇選項在角

<select ng-model="activity.selectedParent" ng-options="parent as parent.title for parent in parents track by parent._id"></select><br> 

我想知道,如果它在某種程度上可以指定一個默認選項,這樣我可以給它一個標題和一個ID。例如,如果選擇了默認值,那麼和activity.selectedParent.id = 0。這是可能以某種方式使用Angular指令在<select>標籤內指定的嗎?否則,實現這一目標的最有效方法是什麼?

+1

參見['ng-selected'](https://docs.angularjs.org/api/ng/directive/ngSelected) –

回答

1

如果我明白你想設置一個對象,即使默認選擇好你的問題,那麼你就可以做到這一點有兩種方式:

  1. 使用您的select標籤內ngInit指令,如下所示:

    ng-init="selectedParent = { '_id': 0, 'title': 'None' };"

  2. 初始化你的對象在你的控制器:

    $scope.selectedParent = { "_id": 0, "title": "None" };

編輯:

我想我得到了你想要的東西,現在:你想有一個默認的選項,而不是一個空白作爲第一選擇,對不對?如果是這樣,你可以簡單地將此元素添加到你的存在的陣列,使用unshift方法,所以它會被放在如下面第一個元素:

$scope.parents.unshift($scope.selectedParent); 

這裏有一個片斷工作:

var app = angular.module('app', []); 
 

 
app.controller('mainCtrl', function($scope) { 
 
    $scope.parents = [ 
 
    { 
 
     "_id":1, 
 
     "title":"first" 
 
    }, 
 
    { 
 
     "_id":2, 
 
     "title":"second" 
 
    }, 
 
    { 
 
     "_id":3, 
 
     "title":"third" 
 
    }, 
 
    { 
 
     "_id":4, 
 
     "title":"four" 
 
    } 
 
    ]; 
 

 
    $scope.selectedParent = { 
 
    "_id": 0, 
 
    "title": "None" 
 
    }; 
 

 
    $scope.parents.unshift($scope.selectedParent); 
 
});
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <select ng-model="selectedParent" ng-options="parent as parent.title for parent in parents track by parent._id"></select> 
 
    <hr> 
 
    Selected: <span ng-bind="selectedParent | json"></span> 
 
</body> 
 

 
</html>

+0

謝謝。如果我使用'ng-init',即使選擇了其他的東西然後決定再次回到默認值,默認值仍然是一個選項嗎? – MadPhysicist

+0

@MadPhysicist,你能看到我的編輯嗎?我想我明白你現在想要..讓我知道如果我失去了一些東西.. – developer033

+0

你添加了不移?這是做什麼的?基本上,我總是顯示從DB查詢的父母列表。但是,我還希望在該清單上有一個選項,使得該條目沒有父母(即成爲自己的子女)。因此,我想知道如何將它添加到列表中。 – MadPhysicist

1

如果在ng-options中使用的數組不包含您希望設置爲默認值的值,那麼最簡單的方法是將默認值添加到數組中。

首先設置selectedParent在控制器

$scope.selectedParent = { "_id": 0, "title": "None" }; 

然後將其添加到所述第一位置的陣列中

$scope.parents.splice(0,0,$scope.selectedParent); 

和選擇的NG-模型finaly設置爲ng-model="$scope.selectedParent"