使用Angularjs如何通过单击编辑按钮从表中绑定下拉值控件？

Question

我只绑定下拉相关值，点击表格中的编辑按钮，它在下拉列表中不起作用

这是我的angularjs代码

myapp = angular
    .module('myapp', ["ui.router", 'ngAnimate', 'angular-loading-bar', 'ui-notification', 'smart-table', 'ui.bootstrap'])
.controller('DemoCtrl', function ($scope, $interval, Notification, cfpLoadingBar, $http) {

        GetAll();
        function GetAll() {
            $http.get("/api/AddCatagories").then(function (response) {
                $scope.cate = response.data
            }, function () {
                alert("Error")
            })
        }
    $scope.subcateedit = function (Id) {
        $http.get("/api/AddSubCatagories/" + Id).then(function (response) {
            cfpLoadingBar.start();
            $scope.SubCata = response.data
            cfpLoadingBar.complete();
        })
    }
 })

Html表格代码在这里你可以查看所有代码..我只绑定下拉相关值，通过点击表格中的编辑按钮，它不在下拉列表中

     <table st-table="sub" st-safe-src="subcate" class="table table-striped">
<thead>
                                    <tr>
                                        <th style="color:black">Id</th>
                                        <th style="color:black" width="100px">SubCatagoryName</th>
                                        <th style="color:black" width="100px">CatagoryName</th>

                                        <th style="color:black">Action</th>
                                    </tr>
                                    <tr>
                                        <th colspan="5">
                                            <label>Search..</label>
                                            <input st-search placeholder="search" class="input-sm form-control" type="search" />
                                        </th>
                                    </tr>
                                </thead>               
 <tbody>
                    <tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in sub">
                        <td style="color:black">{{row.Id}}</td>
                        <td style="color:black">{{row.SubCataName}}</td>
                        <td style="color:black">{{row.tblcatagory.CataName}}</td>
                        <td>
                            <div class="btn-group" role="group" aria-label="...">
                                <button type="button" class="btn btn-default" ng-click="subcateedit(row.Id)">
                                    <i class="glyphicon glyphicon-pencil" style="color:black">
                                    </i>
                                </button>
                                <button type="button" class="btn btn-danger" ng-click="subcatedelete(row.Id)">
                                    <i class="glyphicon glyphicon-trash" style="color:white">
                                    </i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5" class="text-center">
                            <div st-pagination="" st-items-by-page="itemsByPage"></div>
                        </td>
                    </tr>
                </tfoot>
            </table>

html表单代码：

<section class="panel">
    <header class="panel-heading danger">
        Add Catagory
    </header>
    <div class="panel-body" ng-controller="DemoCtrl">
        <div ng-form="frm" name="loginForm"
             class="pure-form pure-form-aligned" autocomplete="off">
            <div class="position-center">
                <div class="form-group" ng-class="{ 'has-error' :loginForm.ddl.$invalid && !loginForm.ddl.$pristine }">
                    <label>SubCatagory Name*</label>

                    <p>{{ SubCata.tblcatagory.CataName }}</p>

                    <select required name="ddl"
                            value="{{ SubCata.tblcatagory.CataName }}" 
                            class="form-control"
                            ng-model="SubCata"
                            ng-options="item.CataName for item in cate">
                    </select>

                    <p ng-show="loginForm.ddl.$dirty && loginForm.ddl.$error.required"
                       class="help-block">Catagory Name is required</p>

                </div>

                <div class="form-group" ng-class="{ 'has-error' :loginForm.name.$invalid && !loginForm.name.$pristine }">

                    <label>SubCatagory Name*</label>
                    <input type="text" name="name" class="form-control" ng-model="SubCata.SubCataName"
                           ng-minlength="3" ng-maxlength="20" required>
                    <p ng-show="loginForm.name.$dirty && loginForm.name.$error.required"
                       class="help-block">SubCatagory Name is required</p>
                    <p ng-show="loginForm.name.$error.minlength" class="help-block">
                        SubCatagory Name is too short.
                    </p>
                    <p ng-show="loginForm.name.$error.maxlength" class="help-block">
                        SubCatagory Name is too long.
                    </p>
                </div>
                <button type="submit" class="btn btn-primary" ng-click="submitSubForm(loginForm.$valid , SubCata)"
                        ng-disabled="loginForm.$invalid">
                    Submit
                </button>
</div>
    </div></div>
</section>

更新

现在有一个问题是ng-model="SubCata.tblcatagory.CataName"因此我无法在控制器$ scope中获得此{{SubCata.tblcatagory.Id}} ID

<select required name="ddl" class="form-control"
        ng-model="SubCata.tblcatagory.Id"
        ng-options="item.Id as item.CataName for item in cate">
</select>

我从这段代码中得到了身份

Answer 1

<label>SubCatagory Name*</label>

<p>{{ SubCata.tblcatagory.CataName }}</p>

<select required name="ddl"
        value="{{ SubCata.tblcatagory.CataName }}" 
        class="form-control"
        ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶S̶u̶b̶C̶a̶t̶a̶"̶
        ̶n̶g̶-̶o̶p̶t̶i̶o̶n̶s̶=̶"̶i̶t̶e̶m̶.̶C̶a̶t̶a̶N̶a̶m̶e̶ ̶f̶o̶r̶ ̶i̶t̶e̶m̶ ̶i̶n̶ ̶c̶a̶t̶e̶"̶
        ng-model="SubCata.tblcatagory.CataName"
        ng-options="item.CataName as item.CataName for item in cate">
</select>