1

I am working with AngularJS and I am so new in that.

My aim is fill a tag SELECT with OPTION element from a datasource. That is what I do basically:

<script>

    function LocalizationController($scope, $http) {
        $scope.Regions = [
            { ID: "001", DESC: "DESC_1" },
              { ID: "002", DESC: "DESC_2" },
                 { ID: "003", DESC: "DESC_3" },
                    { ID: "004", DESC: "DESC_4" },
        ];

        $scope.Region = "003";
        $scope.init = function () {
            $scope.Region = "003";
        }
    }
</script>


<div ng-controller="LocalizationController" ng-init="init();">
    <input type="button" ng-click="Region='002'" value="test">
    <select id="region" name="RegionCode" ng-model="Region">
        <option ng-repeat="item in Regions" value="{{item.ID}}">{{item.DESC}}</option>
    </select>
</div>

Everything works good, the Select is fill of my items, but I would like to set default value.

How you can see - I set my object model which is ng-model="Region" - I set its default value into init() function by $scope.Region = "003"; when the SELECT is loaded I do not why but dafault value is the first one "001"

I also tried to change value manually by in that case the SELECT gets the right value selection.

Anyone can explain why it does not work?

I know that is a common problem, I am already looked for that, any solution suggestion to use NG-OPTION, that directive works good, it can fill my SELECT with my array of object, it can select default value, very nice but it does not solve my problem because the value into the the option element id an integer autoincrement which is not what I want.

so in summary:

NG-REPEAT can render the SELECT how I want but default value does not work NG-OPTIONS can render the SELECT how I want, default value works but the value into option item cannot be set how I want.

any suggestions?

thanks in advance

EDIT

I found a "solution"

<div ng-controller="LocalizationController" EXCLUDE-ng-init="init();"> 
     <select id="region" onload="alert();angular.element(this).scope().Region='002'"  name="RegionCode" ng-model="Region">
        <option ng-repeat="item in Regions" value="{{item.ID}}">{{item.DESC}}</option>
         {{init();}}
    </select>
</div>

I do not like so much but works pretty good: - ng-init="init();" does not work good - If we exclude the initialize of default value into ng-init so EXCLUDE-ng-init="init();" and put the initilize when option are loded it works

Have a look at the code blow, I put {{init();}} after ng-repeat. Everithing works good {{item.DESC}} {{init();}}

I do not think is the best solution but Works, 1) I have a droopdown fill of my elements 2) The value of option into my list is CORRECT, "001", "002" and not a stupid autoincremental value which is useless.

I hope that can help someone... THANKS TO EVERYONE TRIED TO HELP ME

4

2 回答 2

2

只需使用 ng-options

<select id="region" name="RegionCode" ng-model="Region" ng-options="option.ID as option.DESC for option in Regions">

做

$scope.init = function () {
    $scope.Region = $scope.Regions[2];
}

当您在使用ng-options选项值的同时检查选择框时，将像 0,1,2,3 ..，即您所说的自动递增整数。但不要担心。它只是出现在那里的价值，但是一旦你发布你的表格，你就会得到你所拥有的正确价值，在你的情况下ID。

于 2014-01-30T11:53:16.607 回答
0

使用ng 选项

在这种情况下，如果您使用对象（不是单个值），它应该是这样

$scope.init = function () {
    $scope.Region = $scope.Regions[2];
}
于 2014-01-30T11:19:19.683 回答