angularjs为什么在编辑模式下值不在Dropdown中绑定

时间:2016-10-10 05:15:11

标签: angularjs

这里我正在使用联接查询从数据库中获取数据我在这里加入3-Tables(访问者,国家,国家)。当我将数据显示在表中时,一切都很好..但是当我点击时编辑按钮弹出模式弹出&绑定数据但不绑定下拉列表中的国家/地区值

链接查询

    public JsonResult GetAssData()
            {
                var x = (from n in db.Accessors
 join ctr in db.Countrys on n.CountryID equals ctr.CountryIDzjoin sts in db.States on n.StateID equals sts.StateID
   select new{ n.Id,n.Name,ctr.CountryID,ctr.CountryName,sts.StateName});
 return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}

public JsonResult EditSer(int id = 0){
var x = (from n in db.Accessors where n.Id == id
  join ctr in db.Countrys on n.CountryID equals ctr.CountryID
  join sts in db.States on n.StateID equals sts.StateID
  select new{ n.Id, n.Name,ctr.CountryName,sts.StateName});
return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}

public JsonResult BindCtry(){
  var x = from n in db.Countrys select n;
  return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}

      public JsonResult BindStates(int Id=0)
            {
     var x = from n in db.States where n.CountryID ==Id select n;
 return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}

AngularJs

app.service('MyBindServiceservice', function ($http) {

    this.getAss = function () {
        var xx = $http({
            url: '/Bindctrl/GetAssData',
            method: 'Get',
            params: JSON.stringify(),
            content: { 'content-type': 'application/Json' }
        })
        return xx;
    }


    this.EditAssFun = function (Id) {
         alert('enter in edit ser')
        var sts = $http({
            url: '/Bindctrl/EditSer',
            method: 'Get',
            params: {
                Id: JSON.stringify(Id)
            }
        });
        return sts;
    }
});
app.controller('MyBindCNtrls', function ($scope, MyBindServiceservice) {
    GetAssusData();
    function GetAssusData() {
        var xxx = MyBindServiceservice.getAss();
        xxx.then(function (d) {
            $scope.access = d.data;
        })
    }

    $scope.EditEmp = function (Emp) {
        alert('in EditModes')
        var sss = MyBindServiceservice.EditAssFun(Emp.Id);
        sss.then(function (d) {
            $scope.Id = Emp.Id;
            $scope.Name = Emp.Name;
            $scope.CountryName = Emp.CountryName;
            $scope.StateName = Emp.StateName;
            $scope.ValidAction = 'Update';
            $('#Modalpopup').modal('show');
        })
    }
})

Employee.Cshtml

<div ng-controller="MyBindCNtrls">
    <table class="table table-bordered">
        <tr>
            <th><b>Id</b></th>
            <th><b>Name</b></th>        
            <th><b>CountryName</b></th>
            <th><b>StateName</b></th>


        </tr>

        <tr ng-repeat="Accessor in access">
            <td>{{Accessor.Id}}</td>
            <td>{{Accessor.Name}}</td>
            <td>{{Accessor.CountryName}}</td>
            <td>{{Accessor.StateName}}</td>

            <td>
                <button type="button" class="btn btn-success btn-sm" value="Edit" ng-click="EditEmp(Accessor)"><span class="glyphicon glyphicon-pencil"></span></button>

            </td>
        </tr>
    </table>
    <div class="modal" id="Modalpopup">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h3>{{msg}}Login Details</h3>
                </div>

                <div class="modal-body">
                    <form novalidate name="f1" ng-submit="SaveDb(Ass)">
                        <div>
                            {{Errormsg}}
                        </div>
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-2" style="margin-left:20px">
                                        Name
                                    </div>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="nam" ng-model="Name" ng-class="Submittes?'ng-dirty':''" required autofocus />
                                        <span class="Error" ng-show="(f1.nam.$dirty || Submittes) && f1.nam.$error.required">Enter Name</span>
                                    </div>
                                </div>
                            </div>
                             <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-2" style="margin-left:20px">
                                        Country
                                    </div>
                                    <div class="col-sm-8">
                                        <select class="form-control" ng-options="I.StateID as I.StateName for I in StateList" ng-init="StateID" ng-change="GetStates()" ng-class="Submittes?'ng-dirty':''" required>

                                            <option data-ng-repeat="state in CountryList" value="{{state.CountryID}}">{{state.CountryName}}f</option>
                                        </select>

                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-2" style="margin-left:20px">
                                        State
                                    </div>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="cntrsy" ng-options="I.CountryID as I.CountryName for I in CountryList" ng-init="CountryName" ng-model="CountryID" ng-change="GetStates()" ng-class="Submittes?'ng-dirty':''" required>

                                            <option data-ng-repeat="state in CountryList" value="{{state.CountryID}}">{{state.CountryName}}f</option>
                                        </select>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="submit" class="btn btn-sm btn-success pull-right" value="{{ValidAction}}" ng-class="SaveAndSubmit()" />
                      </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

添加$ scope。$ apply();在$ scope.ValidAction ='更新'之后;