我是一个有角度的新手,正在开展一个小型项目,并且遇到了一个与ng-controller有关的奇怪问题。当我在部分视图中使用控制器时,客户的名称不会传递给value属性。
但是,如果我将customersFactory(其具有向数据库发出http请求以获取所有客户的函数)注入ordersController,那么一切正常。
我的路线提供者代码:
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,它就会执行所有&#34;自执行功能&#34;然后将数据分配给$ scope.customers。提前谢谢。
答案 0 :(得分:2)
使用<option>
代替值而不是<option>
代码在select标记中使用ng-options,它比<select name="name" ng-model="order.name" ng-controller="ordersController" ng-options="customer as customer in customers" />
代码
bundle exec rake routes
答案 1 :(得分:0)
尝试使用ng-model="customer.name"
代替value="{{customer.name}}"
答案 2 :(得分:0)
请改用ngOptions指令。可以在此处找到文档:https://github.com/bigfish24/ABFRealmSearchViewController
<select name="name" ng-model="order.name" ng-options="customer as customer.name for customer in customers track by customer.name" ng-controller="ordersController">
答案 3 :(得分:0)
非常感谢您的反馈。我想我已经找到了问题的根源。
关于我能做些什么来修复#2的任何指示? &#34; ng-controller =&#39; customersController&#39;必须在标签之前才能进行&#34; ng-options&#34;正确显示选项?