如何使用 Angular Js 在 asp.net 中创建多个下拉列表项

Question

现在我正在创建一个简单的学生注册表。现在我的表单中有两个下拉列表框。

第一个框包含性别详细信息，第二个包含主题详细信息。

现在我正在尝试使用 Angular Js 为我的应用程序中的相应列表框填充这些项目。

但我失败了，而且我还是 Angular js 的初学者。有人请指导我。 我把我的代码放在这里。

<div class="stud details" ng-app="myapp" ng-controller="MyCtrl">

     Gender:<select>
            <option ng-repeat="x in names">{{x}}</option>
        </select>


    Subject:<select ng-model="selectedUom">
        <option ng-repeat="x in sub" value="{{x.sub}}">{{x.sub}}</option>
        </select>

</div>


 <script>
       var app = angular.module("myapp", [])
     app.controller('MyController', function ($scope) {
         $scope.names = [{ Id: 1, Name: 'Male' }, { Id: 2, Name: 'Female' }, 
         { Id: 3, Name: 'Others' }];
         });
     app.controller('MyController', function ($Scope) {
         $Scope.sub = [{ id: 1, uom: 'Tam' }, { id: 2, uom: 'Eng' }, { id: 
    3, uom: 'Math' }, { id: 4, uom: 'Science' }];
     });

  </script>

实际上我的下拉列表框在运行时显示一组空的列表项。

Answer 1

我已经为你更正了一些东西。但我不知道你到底想要什么。您需要在下面的 sn-p 代码中检查您错过的内容。

       var app = angular.module("myapp", [])
     app.controller('MyController', function ($scope) {
         $scope.names = [{ Id: 1, Name: 'Male' }, { Id: 2, Name: 'Female' }, 
                         { Id: 3, Name: 'Others' }];       
    
         $scope.sub = [{ id: 1, uom: 'Tam' }, { id: 2, uom: 'Eng' },
                      { id: 3, uom: 'Math' }, { id: 4, uom: 'Science' }];
         $scope.selectedName=$scope.names[0].Name;
         $scope.selectedUom=$scope.sub[0].uom;
     });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="stud details" ng-app="myapp" ng-controller="MyController">

     Gender:<select ng-model="selectedName">
            <option ng-repeat="x in names">{{x.Name}}</option>
        </select>


    Subject:<select ng-model="selectedUom">
        <option ng-repeat="x in sub">{{x.uom}}</option>
        </select>
</div>