带有下拉选择的angularjs

时间:2015-11-25 12:01:15

标签: jquery asp.net angularjs ajax

如果我选择下拉文本显示该表使用SQL数据库。请尝试解决这里我的代码现在假设我在下拉列表中选择一个文本&单击按钮,然后使用SQL Server显示所选的文本表。

<div ng-app="myApp" ng-controller="myCntrl"> user Roles: <select id="dropdown" name="dropdown" ng-model="dropdown">
  <option value="">--Select--</option>
  <option data-ng-repeat="Role in RolesList">{{Role.RoleName}}</option>
</select>
  </br></br>
  <input id="Button1" type="button" class="button" value="button" ng-click="click()"  />      </div>

<script>var app = angular.module("myApp", []);
        app.controller("myCntrl", function ($scope, $http) {               
        $scope.fillList = function () {
            $scope.RoleName = "";
            var httpreq = {
                method: 'POST',
                url: 'WebForm1.aspx/GetList',
                headers: {
                    'Content-Type': 'application/json; charset=utf-8',
                    'dataType': 'json'
                },
                data: {}
            }
            $http(httpreq).success(function (response) {
                $scope.RolesList = response.d;                   
            })
        };
        $scope.fillList();           
    });
</script>

这里是我的cs代码

[System.Web.Services.WebMethod()]
    public static List<Names> GetList()
    {
        List<Names> names = new List<Names>();
        DataSet ds = new DataSet();
        using (SqlConnection con = new SqlConnection(@"Data Source=192.168.1.42,1433;Initial Catalog=Harneedi;User ID=chaitanya_t;Password=makrotech"))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.Connection = con;
                cmd.CommandText = "select RoleName from HN_Master_User_Role";
                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                {
                    da.Fill(ds);
                }
            }
        }
        if (ds != null && ds.Tables.Count > 0)
        {
            foreach (DataRow dr in ds.Tables[0].Rows)
                names.Add(new Names(dr["RoleName"].ToString()));
        }
        return names;
    }

}
public class Names
{
    public string RoleName;
    public Names(string _RoleName)
    {
        RoleName = _RoleName;
    }
}

}

1 个答案:

答案 0 :(得分:0)

填充下拉代码的代码对我来说很好。虽然您没有指定用户点击按钮时尝试执行的操作,但我将展示如何获取所选的下拉列表值。

您需要在控制器中添加一个可以从按钮调用的行为: -

$scope.fillList(); 
$scope.click = function (selectedValue) {
                     alert(selectedValue);
                }

然后,由于您已使用ng-model="dropdown"绑定了下拉列表选定值,因此在调用此行为时可以使用相同的值: -

 <input id="Button1" type="button" class="button" value="button" 
         ng-click="click(dropdown)" />