jquery - 带有下拉选择的 AngularJS

Question

如果我选择下拉文本，则使用 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;
    }
}

}

Answer 1

您的填充下拉代码的代码对我来说看起来很好。虽然您没有指定当用户单击按钮时要执行的操作，但我将向您展示如何获取下拉列表的选定值。

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

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

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

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