问题
While ng-model is used in select box and ng-selected is also used in options with some condition that time ng-selected is not working.
If I will remove ng-model than ng-selected is working, but if i will remove ng-model than how I should get the value of select box in controller.
Please help !
Here is my code...
HTML:
<select class="form-control" ng-change="accessModeSelected()">
<option ng-selected="mode.status == '1'" ng-repeat="mode in storageResult.accessMode" ng-value="mode.name" name="accessMode{{$index}}" id="accessMode">
{{mode.name}}
</option>
</select>
AngularJS:
$scope.storageResult = {
"storageAccount":"Enable",
"user": "sdcard",
"pass": "sdcard",
"wifiIP": "0",
"ipAddr": "0",
"accessMode": [
{"name": "Local Storage","status": "0"},
{"name":"WiFi Storage", "status": "1"},
{"name":"Internet Storage", "status": "0"}
]
}
回答1:
Use ng-options
and ng-init
(for setting default value) instead of ng-repeat
.
ng-options
is specifically for select
<select class="form-control" ng-init="statusselect='WiFi Storage'" ng-model="statusselect" ng-options="mode.name as mode.name for mode in storageResult.accessMode">
</select> Selected Value : {{statusselect}}
FIDDLE
Edit: Using ng-repeat
I would prefer ng-options
,but if you want to use ng-selected
with ng-repeat
you'll need provide a default selected value to ng-model
from your controller
<select class="form-control" ng-model="statusselect">
<option ng-selected="{{mode.name == statusselect}}" ng-repeat="mode in storageResult.accessMode" value="{{mode.name}}" name="accessMode{{$index}}" id="accessMode">
{{mode.name}}
</option>
</select> Selected Value : {{statusselect}}
Inside Controller
$scope.storageResult = {
"storageAccount":"Enable",
"user": "sdcard",
"pass": "sdcard",
"wifiIP": "0",
"ipAddr": "0",
"accessMode": [
{"name": "Local Storage","status": "0"},
{"name":"WiFi Storage", "status": "1"},
{"name":"Internet Storage", "status": "0"}
]
}
$scope.statusselect = $scope.storageResult["accessMode"][1]["name"];
FIDDLE
回答2:
Use ng-options instead of ng-repeat
<select ng-model="status" ng-options="mode.status as mode.name for mode in storageResult.accessMode">
and In controller
app.controller("dobController", ["$scope", "$http",
function($scope, $http) {
$scope.storageResult = {
"storageAccount": "Enable",
"user": "sdcard",
"pass": "sdcard",
"wifiIP": "0",
"ipAddr": "0",
"accessMode": [{
"name": "Local Storage",
"status": "0"
}, {
"name": "WiFi Storage",
"status": "1"
}, {
"name": "Internet Storage",
"status": "0"
}]
};
$scope.status = '1';
}
]);
DEMO
回答3:
I'm sure there are many ways to answer this question and a lot of answers have been provided,but based on OP's question on how to send 'mode.name
' into ng-model
I've explained below using ng-options
.
In your JS
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope", "$http",
function($scope, $http) {
$scope.storageResult = {
"storageAccount": "Enable",
"user": "sdcard",
"pass": "sdcard",
"wifiIP": "0",
"ipAddr": "0",
"accessMode": [{
"name": "Local Storage",
"status": "0"
}, {
"name": "WiFi Storage",
"status": "1"
}, {
"name": "Internet Storage",
"status": "0"
}]
};
$scope.status = $scope.storageResult.accessMode[0].name;
$scope.selectedItem = '';
}
]);
In your HTML to bind mode name to ng-model follow this.
<select ng-model="status" ng-options="mode.name as mode.name for mode in storageResult.accessMode">
To bind entire object you can try below syntax
<select ng-model="status" ng-options="mode as mode.name for mode in storageResult.accessMode">
For this make small change in your JS $scope.status
like
$scope.status = $scope.storageResult.accessMode[0];
Here is a DEMO plunker
来源:https://stackoverflow.com/questions/39653256/ng-selected-is-not-working-with-ng-model-in-select-box-angularjs