angularjs中的双向数据绑定

时间:2016-11-17 11:12:06

标签: javascript angularjs

我正在使用angularjs创建一个网络应用程序,

在我的一个按钮上点击我通过angularjs调用Web服务

 [WebMethod]
    [ScriptMethod(UseHttpGet = true)]
    public void getuprec(string id)
    {
        List<object> selectrecd = new List<object>();
        SqlCommand cmd = new SqlCommand("select * from erp_admin.CompanySonVinUnitVenueRpt where comsonvinid in (select id from companysonvinunitvenue where id='"+id+"')",con);
        con.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        while(dr.Read())
        {
            selectrecd.Add(new
            {
                attendee1 = dr["comattendee1"].ToString(),
                attendee2 = dr["comattendee2"].ToString(),
                totalmale = dr["attendeetotalmale"].ToString(),
                totalfemale = dr["attendeetotalfemale"].ToString(),
                unit1 = dr["unitattendee1"].ToString(),
                unitd1 = dr["unitattendee1desig"].ToString(),
                unit2 = dr["unitattendee2"].ToString(),
                unitd2 = dr["unitattendee2desig"].ToString(),
                unit3 = dr["unitattendee3"].ToString(),
                unitd3 = dr["unitattendee3desig"].ToString(),
                unit4 = dr["unitattendee4"].ToString(),
                unitd4 = dr["unitattendee4desig"].ToString(),
                unit5 = dr["unitattendee5"].ToString(),
                unitd5 = dr["unitattendee5desig"].ToString(),
                remarks = dr["remarks"].ToString()
            });
        }
        con.Close();
        var json = js.Serialize(selectrecd);
        Context.Response.Write("{" + '"' + "selectrecd" + '"' + ":" + json + "}");
    }

这是我的网络服务,工作正常(我测试过)和我的angularjs文件

                 $scope.updatefunction = function (param) {
                        $http.get('/frmattendencerptqed.asmx/getuprec', {
                            params: {
                                id: $scope.updateparam.comsonvinid
                            }
                        })
                        .then()
                        {

                        }
                    }

这是我的angularjs

这是我的输入字段

<input type="text" ng-model="remarks" style="width:100%;" />

现在我需要从我的数据库中获取先前的值并绑定我的文本框上的值,如果用户编辑文本框,则必须在按钮单击时更新值

我需要怎么做

2 个答案:

答案 0 :(得分:0)

这就是angularjs正常工作的方式,双向数据绑定遵循本教程:
http://www.w3schools.com/angular/angular_databinding.asp 您将看到您只需要从控制器调用更新功能并将绑定到变量的变量传递给输入。
当然,这个变量在控制器中分配给$scopethis(有两种方式)。

答案 1 :(得分:0)

  

这是我的输入字段

<input type="text" ng-model="remarks" style="width:100%;" />
  

现在我需要从我的数据库中获取先前的值并绑定   我的文本框上的值,如果用户编辑文本框,则值必须   按钮点击更新

哪一个remarks属性? 在您的Web服务中,您将返回一个json对象,该对象包含一组结构化对象,每个对象可能包含remark属性。 您是否可以发布web服务调用的结果json以便提供更多详细信息?

关于如何检索和绑定角度js控制器中的数据,这是我的答案 来自https://docs.angularjs.org/api/ng/service/$http 您可以从返回对象的data属性中检索响应。

  

data - {string | Object} - 用。转换的响应体   转换函数。

所以你可以这样做:

$scope.updatefunction = function (param) {
                        $http.get('/frmattendencerptqed.asmx/getuprec', {
                            params: {
                                id: $scope.updateparam.comsonvinid
                            }
                        })
                        .then(                  
                                   // handling if ok
                                function(response){
                                 $scope.remarks=response.data.selectrecd[indexYourWish].remarks 
                                },

                                function(errResponse){  
                                   // handling if error
                                    return $q.reject(errResponse);
                                }
                             );                                
                    }

如前所述,我引用一个数组来检索response.data中的信息,如果你没有返回数组,你应该定义一个索引,或者不在所有索引中使用。

remarks应该是控制器范围内的变量。 用于控制器的相关语法取决于您在Angular中声明事物的方式(个人而言,我避免使用$scope.xxx语法)。
如果您想要更精确的答案,请发布更多JS代码。