使用AngularJS将多个元素绑定到多个表

时间:2016-06-16 22:38:48

标签: angularjs asp.net-mvc

我又回到了另一个基本的Angular问题。好吧,我很容易从数据库中读取并使用ASP.Net MVC和AngularJS在视图上显示数据。以下示例非常简单:

查看:

<table class="table table-striped">
    <tr ng-repeat="p in products">
        <td>{{p.pName}}</td>
    </tr>
</table>

角度控制器:

var myApp = angular.module('myApp', []);

myApp.controller('mainController', function ($scope, $http) {
$http.get('/Home/GetProducts')
    .success(function (result) {
        $scope.products = result;
    })
    .error(function (data) {
        console.log(data);
    });
});

MVC控制器:

public JsonResult GetProducts()
    {
        var db = new testDBEntities();
        return this.Json((from pObj in db.Products
                          select new
                          {
                              pId = pObj.Id,
                              pName = pObj.nme,
                              pDesc = pObj.descr,                                  
                          })
                          , JsonRequestBehavior.AllowGet
                        );
    }

我的问题是: 我想在我的视图中添加另一个元素,让我们说一个选择标签。我想将该元素绑定到用户表,我可以列出所有用户。

请你帮我解决这个问题,我对如何做到这一点非常困惑。

我试着做以下事情但没有运气:

<select ng-model="getUsers">
  <option ng-options="x in users">{{x.ufName + " " + x.ulName}}</option>
</select>

//////

$scope.getUsers = function () {
    $http.post('/Home/GetUsers')
        .success(function (result) {
            $scope.users= result;
        })
        .error(function (data) {
            console.log(data);
        });

////

public JsonResult GetUsers()
    {
        var db = new testDBEntities();
        return this.Json((from userObj in db.Users
                          select new
                          {
                              uId = userObj.Id,
                              ufName = userObj.usrFirstName,
                              ulName = userObj.usrLastName,                                  
                          })
                          , JsonRequestBehavior.AllowGet
                        );
    }

1 个答案:

答案 0 :(得分:0)

尝试将ng-options放在select上,而不是选项。

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

resource

编辑以清除我在评论中所说的内容。

var myApp = angular.module('myApp', []);

myApp.controller('mainController', function ($scope, $http) {
    $http.get('/Home/GetProducts').then(
        function (result) {
            // success
            $scope.products = result;
        },
        function (data) {
            // fail
            console.log(data);
        }
    );

    $http.get('/Home/GetUserss').then(
        function (result) {
            // success
            $scope.users = result;
        },
        function (data) {
            // fail
            console.log(data);
        }
    );
 });