Невозможно установить выбранное значение DropDown В angularJs

У меня есть DropDown. Я привязываю его значение, используя ng-repeat в опции. Я хочу установить выбранное значение только с помощью поля значения.

Это мой код.

<div ng-controller="myCtrl">
    <select ng-model="selectedItemvalue">
        <option value="">--Select --</option>
        <option ng-repeat="sel in selectables" value="{{sel.value}}">{{sel.label}}</option>
    </select>
    <p>Selected Value is : {{selectedItemvalue}}</p>
</div>

angular.module('myApp', [])

// controller here
.controller('myCtrl', function($scope) {
    $scope.selectables = [
        { label: 'A', value: 1},
        { label:'B', value: 2},
        { label: 'C', value: 3}
    ];

    // this is the model that used for the data binding in the select directive
    // the default selected item
    //using value, i want to set the selected value
    $scope.selectedItemvalue = "2"; 
})

Моя скрипта

Как вы можете видеть, я хочу установить только выбранное значение uisng. Установив значение.

Ответ 1

Вам нужно использовать ng-model вместо ng-value, чтобы привязать его к модели.

<select ng-model="selectedItemvalue">

Обновление: $scope.selectedItem должно быть $scope.selectedItemvalue в контроллере, а затем вы можете использовать ng-selected для соответствия условию

Рабочая демонстрация

angular
.module('myApp', [])

// controller here
.controller('myCtrl', function($scope) {
    $scope.selectables = [
        { label: 'A', value: 1},
        { label:'B', value: 2},
        { label: 'C', value: 3}
    ];

    // this is the model that used for the data binding in the select directive
    // the default selected item
    //using value, i want to set the selected value
    $scope.selectedItemvalue = "2"; 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-controller="myCtrl" ng-app="myApp">
    <select ng-model="selectedItemvalue">
        <option value="">--Select --</option>
        <option ng-repeat="sel in selectables" ng-selected="selectedItemvalue == sel.value" value="{{sel.value}}">{{sel.label}}</option>
    </select>
 <p>Selected Value is : {{selectedItemvalue}}</p>
</div>

Ответ 2

Вам нужно в основном использовать следующий синтаксис для тэга option (используйте ng-selected):

<option ng-repeat="sel in selectables" value="{{sel.value}}" ng-selected="sel.value == selectedItemvalue">{{sel.label}}</option>

Ответ 3

Если вы попробуете

$scope.selectedItemvalue = {label: 'B', value: 2};

тогда он будет работать.