Javascript 安格拉斯<；选择>；用于<；的双向数据绑定；选项>；来自AJAX调用_Javascript_Jquery_Ajax_Angularjs

Javascript 安格拉斯<；选择>；用于<；的双向数据绑定；选项>；来自AJAX调用

javascript jquery ajax angularjs

Javascript 安格拉斯<；选择>；用于<；的双向数据绑定；选项>；来自AJAX调用,javascript,jquery,ajax,angularjs,Javascript,Jquery,Ajax,Angularjs,我有一个控制器： JApp.controller('WebsiteController', function($scope, $resource) { var UsersService = $resource('/auth/users', {}); $scope.adding = false; $scope.users = []; $scope.addUser = function() { $scope.adding = true;

我有一个控制器：

JApp.controller('WebsiteController', function($scope, $resource) {
    var UsersService = $resource('/auth/users', {});

    $scope.adding = false;
    $scope.users = [];

    $scope.addUser = function() {
        $scope.adding = true;

        UsersService.query({}, function(data) {
            $scope.users = data;
            $scope.selectedUser = data[0];
        });
    }

    $scope.cancelAddUser = function() {
        $scope.adding = false;
    }
});

我的HTML：

<section class="vbox" ng-controller="WebsiteController">
<section class="panel animated fadeInDown">
    <header class="panel-heading">
      <h3>{{selectedUser.last_name}} </h3> <!-- Just to test I print it here -->
    </header>
    <div class="panel-body m-b">
        <div class="row text-sm wrapper">
            @if (role_admin())
                <a href="{{{URL::action('WebsiteController@getAddWebsite')}}}" class="btn btn-sm btn-info"> <i class="icon-plus"></i> New Website </a>
            @endif                  

        </div>
        <div class="table-responsive">
            <table class="table table-striped b-t text-sm">
              <thead>
                  <tr>
                    <th>URL</th>
                    <th>Assigned to</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                                    <!-- Outside this <tr> doesn't work -->
                    <tr ng-repeat="website in websites">
                        <td> {{website.url}}</td>
                        <td>
                             <span ng-repeat="assigned in website.users"> <span class="label label-info"> {{assigned.first_name}} </span> &nbsp; </span>
                             <a ng-click="addUser()" ng-hide="adding" class="btn btn-success btn-xs"> Add new </a></span>                               
                                 <select ng-hide="!adding" 
                                            name="myselect" 
                                            ng-model="selectedUser" 
                                            ng-options="u.first_name for u in users">
                                 </select>
                             <a href="#" ng-hide="!adding" ng-click="cancelAddUser()" class="btn btn-warning btn-xs">Cancel</a>
                             <input type="text" ng-model="selectedUser.first_name"> <!-- It works here! -->
                        </td>
                        <td>
                            <a href="#" class="btn btn-xs btn-white"> <i class="icon-pencil"></i> Edit </a>
                        </td>
                    </tr>
                </tbody>                    
            </table>
        </div>
    </div>
</section>
</section>

但无论如何仍然不起作用，尽管我指定了

ng model=“selectedUser”

，但它根本没有绑定

JSON返回：

[
    {
        "id": 1,
        "role_id": 1,
        "created_at": "2013-09-19 05:54:36",
        "updated_at": "2013-09-19 05:54:36",
        "email": "admin@admin.com",
        "username": "admin",
        "first_name": "Admin",
        "last_name": "Istrator"
    },
    {
        "id": 2,
        "role_id": 2,
        "created_at": "2013-09-19 05:54:36",
        "updated_at": "2013-09-19 05:54:36",
        "email": "johndoe@gmail.com",
        "username": "john",
        "first_name": "John",
        "last_name": "Doe"
    }
]

有人能帮我吗？我尽量不走$digest或$apply这条路，如果我不需要的话

更新2 问题的根源是，如果我试图在我上面的HTML中重复以下ng之外打印selectedUser：

<tr ng-repeat="website in websites"> ...... </tr>

。。。。。。

用小提琴来说明我的问题：

选择下拉选项的值是u.first\u name，因此可以这样做：

$scope.selectedUser = data[0].first_name;

或者将其更改为使用ID或类似的内容

ng-options="u.id as u.first_name for u in users"
$scope.selectedUser = data[0].id;

试试这个

HTML:

   <div ng-app="myApp">
    <section class="vbox" ng-controller="WebsiteController">
   <section class="panel animated fadeInDown">
<header class="panel-heading">
  <h3>{{mySelectedUser.last_name}} </small> <!-- Just to test I print it here -->
</header>
<div class="panel-body m-b">
    <div class="table-responsive">
        <table class="table table-striped b-t text-sm">
          <thead>
              <tr>
                <th>URL</th>
                <th>Assigned to</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
                <tr ng-repeat="website in websites">
                    <td>
                         <span ng-repeat="assigned in website.users"> <span class="label label-info"> {{assigned.first_name}} </span> &nbsp; </span>
                         <a ng-click="addUser()" ng-hide="adding" class="btn btn-success btn-xs"> Add new </a></span>                               
                             <select ng-hide="!adding" 
                                        name="myselect" 
                                        ng-model="selectedUser" 
                                        ng-change="abc(selectedUser)"
                                        ng-options="u.first_name for u in users">
                             </select>
                         <a href="#" ng-hide="!adding" ng-click="cancelAddUser()" class="btn btn-warning btn-xs">Cancel</a>
                         <input type="text" ng-model="selectedUser.first_name"> <!-- It works here! -->
                    </td>
                    <td>
                        <a href="#" class="btn btn-xs btn-white"> <i class="icon-pencil"></i> Edit </a>
                    </td>
                </tr>
            </tbody>                    
        </table>
    </div>
</div>
 </section>
</section>
</div>

请参见

它不起作用。从逻辑上讲，我也有同样的想法。但是现在如果我将$scope.selectedUser打印到屏幕上，它现在会显示1（第一个用户的id），但是，当我从下拉列表中更改用户的选择时，它不会更改我的$scope。SelectedUser您能否提供来自查询的数据您需要更改下拉列表中的选定用户应该更改父项是我对$scope缺乏了解，这是问题所在。当我在顶部打印selectedUser时（仍然在我的WebsiteController中），当我更改我的选择时，这些值不会得到更新。但是，当我将selectedUser打印在

旁边时（如您的示例），它会在我更改选择时更新。你能给我解释一下吗？谢谢你的耐心@Nitish，如果我用

ng repeat

为网站打印

{{selectedUser.last\u name}}

之外的

，我的问题就会发生。我的问题已更新。请再次检查我的问题。感谢fiddle。创建新变量并将其设置为更改选择如果您能从fiddle示例中获益，将对我有很大帮助？：）

   <div ng-app="myApp">
    <section class="vbox" ng-controller="WebsiteController">
   <section class="panel animated fadeInDown">
<header class="panel-heading">
  <h3>{{mySelectedUser.last_name}} </small> <!-- Just to test I print it here -->
</header>
<div class="panel-body m-b">
    <div class="table-responsive">
        <table class="table table-striped b-t text-sm">
          <thead>
              <tr>
                <th>URL</th>
                <th>Assigned to</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
                <tr ng-repeat="website in websites">
                    <td>
                         <span ng-repeat="assigned in website.users"> <span class="label label-info"> {{assigned.first_name}} </span> &nbsp; </span>
                         <a ng-click="addUser()" ng-hide="adding" class="btn btn-success btn-xs"> Add new </a></span>                               
                             <select ng-hide="!adding" 
                                        name="myselect" 
                                        ng-model="selectedUser" 
                                        ng-change="abc(selectedUser)"
                                        ng-options="u.first_name for u in users">
                             </select>
                         <a href="#" ng-hide="!adding" ng-click="cancelAddUser()" class="btn btn-warning btn-xs">Cancel</a>
                         <input type="text" ng-model="selectedUser.first_name"> <!-- It works here! -->
                    </td>
                    <td>
                        <a href="#" class="btn btn-xs btn-white"> <i class="icon-pencil"></i> Edit </a>
                    </td>
                </tr>
            </tbody>                    
        </table>
    </div>
</div>
 </section>
</section>
</div>

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

 JApp.controller('WebsiteController', function($scope) {
//var UsersService = $resource('/auth/users', {});

$scope.adding = false;
$scope.users = [];

$scope.websites = [
    {
        "id": 1,
        "url": "www.google.com",
        "cms": "Wordpress"
    }
    ];

$scope.addUser = function() {
    $scope.adding = true;
   var data = [
   {
     "id": 1,
     "role_id": 1,
     "created_at": "2013-09-19 05:54:36",
     "updated_at": "2013-09-19 05:54:36",
     "email": "admin@admin.com",
     "username": "admin",
     "first_name": "Admin",
     "last_name": "Istrator"
   },
  {
     "id": 2,
     "role_id": 2,
     "created_at": "2013-09-19 05:54:36",
     "updated_at": "2013-09-19 05:54:36",
     "email": "johndoe@gmail.com",
     "username": "john",
     "first_name": "John",
     "last_name": "Doe"
  }
];
   // UsersService.query({}, function(data) {
        $scope.users = data; // suppose data is coming from UsersService.query
        $scope.selectedUser = data[1];
        $scope.mySelectedUser = $scope.selectedUser ;
  //  });
}
$scope.abc = function(a) {
    $scope.mySelectedUser = a;

 }
$scope.cancelAddUser = function() {
    $scope.adding = false;
}
});