Ng-Controller не передает данные

Question

Я - угловатый новичок и работаю над небольшим проектом и столкнулся с какой-то странной проблемой с ng-контроллером. Когда я использую контроллер в своем частичном представлении, имя клиента не переходит в свойство value.

Однако, если я ввожу клиентовFactory (который имеет функцию, которая делает HTTP-запрос к базе данных, чтобы все клиенты) в orderController, все работает нормально.

Мой routeProvider код:

 myApp.config(function($routeProvider) { 
     $routeProvider 
     .when('/', { 
      controller: 'ordersController', 
      templateUrl: 'partials/orders.html' 
     }) 
     .when('/customers', { 
      controller: 'customersController', 
      templateUrl: 'partials/customers.html' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }) 
    }); 

    myApp.factory('ordersFactory', function($http) { 
     var orders = []; 

     var factory = {}; 

     factory.getOrders = function(callback) { 
      $http.get('/orders').success(function(data) { 
       orders = data; 
       callback(orders); 
      }) 
     } 

     factory.addOrder = function(data) { 
      return $http.post('/add/order', data); 
     } 

     factory.deleteOrder = function(id) { 
      return $http.delete('/delete/order/' + id); 
     } 

     return factory; 
    }); 

    myApp.factory('customersFactory', function($http) { 
     var customers = []; 

     var factory = {}; 

     factory.getCustomers = function(callback) { 
      $http.get('/customers').success(function(data) { 
       customers = data; 
       callback(customers); 
      }) 
     } 

     factory.addCustomer = function(data) { 
      return $http.post('/add/customer', data); 
     } 

     factory.removeCustomer = function(customer_id) { 
      return $http.delete('/delete/customer/' + customer_id); 
     } 

     return factory; 
    }); 

    myApp.controller('ordersController', function($scope, ordersFactory) { 

     var getOrders = function() { 
      ordersFactory.getOrders(function(data) { 
       $scope.orders = data; 
      }); 
     } 

     getOrders(); 

     $scope.addOrder = function() { 
      console.log($scope.order); 
      ordersFactory.addOrder($scope.order); 
      $scope.order = {}; 
      getOrders(); 
     } 

     $scope.deleteOrder = function(id) { 
      ordersFactory.deleteOrder(id); 
      getOrders(); 
     } 

    }); 

    myApp.controller('customersController', function($scope, customersFactory) { 

     var getCustomers = function() { 
      customersFactory.getCustomers(function(data) { 
       $scope.customers = data; 
      }) 
     } 

     getCustomers(); 

     $scope.addCustomer = function() { 
      customersFactory.addCustomer($scope.customer); 
      $scope.customer = {}; 
      getCustomers(); 
     } 

     $scope.removeCustomer = function(customer_id) { 
      customersFactory.removeCustomer(customer_id); 
      getCustomers(); 
     } 
    }); 

Вот часть страницы orders.html.

<h2>Add New Order</h2> 
<form> 
<label for="name">Customer</label> 
<select name="name" ng-model="order.name" ng-controller="customersController"> 
    <option ng-repeat="customer in customers" value="{{customer.name}}">{{ customer.name }}</option> 
</select> 
<label for="quantity">Order</label> 
<select name="quantity" ng-model="order.quantity"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 
<select name="product" ng-model="order.product"> 
    <option value="Nike Shoes">Nike Shoes</option> 
    <option value="Black Belts">Black Belts</option> 
    <option value="Ice Creams">Ice Creams</option> 
    <option value="Candies">Candies</option> 
    <option value="Waffles">Waffles</option> 
</select> 
<input type="submit" value="Order" ng-click="addOrder()"> 
</form> 
<table> 
<thead> 
    <tr> 
     <td>Customer Name</td> 
     <td>Product</td> 
     <td>Quantity</td> 
     <td>Date</td> 
     <td>Action</td> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="order in orders"> 
     <td>{{ order.name }}</td> 
     <td>{{ order.product }}</td> 
     <td>{{ order.quantity }}</td> 
     <td>{{ order.date }}</td> 
     <td><a href="#/" ng-click="deleteOrder(order._id)">Remove</a></td> 
    </tr> 
</tbody> 
</table> 

Может кто-нибудь объяснить, почему это так? Моя первоначальная догадка заключается в том, что это связано с тем, что явно не назначает $ scope.customers, но у меня создается впечатление, что как только ng-controller обнаружен, он выполняет все «самоисполняемые функции», которые затем назначают данных в $ scope.customers. Заранее спасибо.

Answer 1

Попробуйте ng-model="customer.name" вместо value="{{customer.name}}"

Answer 2

Используйте директиву ngOptions вместо этого. Документацию можно найти здесь: https://docs.angularjs.org/api/ng/directive/ngOptions

<select name="name" ng-model="order.name" ng-options="customer as customer.name for customer in customers track by customer.name" ng-controller="ordersController"> 

Answer 3

Использование ng-model вместо значения и вместо <option> использования тегов нг-опций выбора тега это быстро, как сравнить <option> тег

<select name="name" ng-model="order.name" ng-controller="ordersController" ng-options="customer as customer in customers" /> 

Answer 4

спасибо много для вашей обратной связи. Я думаю, что я понял корень моей проблемы.

1. Я не использую ng-опции для перебора массива, полного объектов.
2. Я вызываю orderController в routeProvider, но переопределяю его с помощью клиентовController, который вызывает ng-model = "order.name", чтобы не передаваться в область.

Любые указатели на то, что я могу сделать, чтобы исправить # 2? Нужно ли «ng-controller = 'customersController» поступать перед тегом, чтобы «ng-options» правильно отображали параметры?