AngularJS directive select

  • dataValue.Id as dataValue.Name for (dataKey, dataValue) in TypesList" - {{}{}{}}
  • item.Id as item.Name for item in TypesList - [{}{}{}]

html:

<section class="well clearfix" ng-app="app">
    <div ng-controller="appController">
        <p>Dropdown from array:
            <button class="btn btn-primary" ng-click="manualSetArr()">manual set</button>{{ selectArr.data | json }}
            <select class="form-control" ng-model="selectArr.data" required ng-options="data.name for data in dataArr">
                <option value=""></option>
            </select>
        </p>
        <p>Dropdown from object:
            <button class="btn btn-primary" ng-click="manualSetObj()">manual set</button>{{ selectObj.data | json }}
            <select class="form-control col-xs-3" ng-model="selectObj.data" required ng-options="dataValue.name for (dataKey, dataValue) in dataObj">
                <option value=""></option>
            </select>
        </p>
        <p>Dropdown from array and select first option: {{ selectArr2.data | json }}
            <select class="form-control" ng-model="selectArr2.data" required ng-options="data.name for data in dataArr" ng-init="selectArr2.data=dataArr[0]"></select>
        </p>
    </div>
</section>

js:

var app = angular.module('app', []);
 
app.controller('appController', function ($scope) {
    $scope.selectArr = {};
    $scope.selectObj = {};
    $scope.dataArr = [{
        id: 1,
        name: 'one'
    }, {
        id: 2,
        name: 'two'
    }];
    $scope.dataObj = {
        '0': {
            id: 1,
            name: 'one'
        },
        '1': {
            id: 2,
            name: 'two'
        }
    };
    $scope.manualSetArr = function () {
        $scope.selectArr.data = $scope.dataArr[0];
    };
    $scope.manualSetObj = function () {
        $scope.selectObj.data = $scope.dataObj['0'];
    };
});

Leave a Reply

Your email address will not be published. Required fields are marked *