我在html中有一个选项框，我试图使用Angularjs设置选项。但它不起作用。请找到下面的代码。如果我在控制台中调用代码，我能够看到预期的html被返回。意味着，更改在DOM中受到适当影响，但它没有反映在UI中。
HTML
angular.module('TestApp', []);
var customers=false;
var selectCustomer;
var supplier=false;
var selectSupplier;
angular.module('TestApp').controller('CustomerController',
function($scope, CustomerService) {
$scope.callCustomer = function() {
if(customers==false){
console.log("i am in customer ajax call");
customers=true;
$scope.selected = [];
CustomerService.getCustomers().then(function(serverdata) {
selectCustomer=serverdata.data;
$scope.selected=selectCustomer;
}, function(error) {
alert("data loading failed");
console.log(error);
});
}else{
console.log("selected customers are "+$scope.selected);
$scope.selected=selectCustomer;
console.log("selected customers are "+$scope.selected);
console.log("I am out customer ajax call");
}
}
});
angular.module('TestApp').service(
'CustomerService',
function($http) {
this.getCustomers = function() {
return $http.get("http://" + document.location.host
+ "/SivaTask/getCustomer");
}
});
// ====================================================================
angular.module('TestApp').controller('SupplierController',
function($scope, SupplierService) {
$scope.callSupplier = function() {
if(supplier==false){
console.log("I am in supplier ajax call");
$scope.selected = [];
supplier=true;
SupplierService.getSuppliers().then(function(serverdata) {
selectSupplier=serverdata.data;
$scope.selected=selectSupplier;
}, function(error) {
alert("data loading failed"); // user
console.log(error);
});
}else{
$scope.selected=selectSupplier;
console.log("I am out supplier ajax call");
}
}
});
angular.module('TestApp').service(
'SupplierService',
function($http) {
this.getSuppliers = function() {
return $http.get("http://" + document.location.host
+ "/SivaTask/getSupplier");
}
});
// ===================================================================
function f1() {
//alert("hello");
console.log(document.getElementById("payterm").value);
var value = document.getElementById("payterm").value;
if (value == 'Payment') {
var scope = angular.element(document.getElementById("customerController")).scope();
scope.callCustomer();
} else if (value == 'Receipt') {
var scope = angular.element(
document.getElementById("supplierController")).scope();
scope.callSupplier();
} else {
alert("invalid selection");
}
};<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table id="table1">
<tr>
<th>
<td><select id="payterm" ng-model="payterm">
<option value="Payment" onclick="f1()">Payment</option>
<option value="Receipt" onclick="f1()">Receipt</option>
</select></td>
<td><select id="payment" ng-model="payment">
<option value="Cash" onclick="f1()">Cash</option>
<option value="Bank" onclick="f1()">Bank</option>
</select></td>
<td>
<div id="customerController" ng-controller="CustomerController">
<div id="supplierController" ng-controller="SupplierController">
<select id="select" ng-model="select">
<option ng-repeat="select in selected">{{select}}</option>
</select>
</div>
</div>
</td>
<td><input id="amount" type="text" ng-model="amount" /></td>
<td>
<button name="add" ng-controller="ConcatController"
ng-click="concat();">+</button>
</td>
</tr>
</table>
答案 0 :(得分：0)
尝试使用ng-click代替onclick代替AngularJS：
<td><select id="payterm" ng-model="payterm">
<option value="Payment" ng-click="f1()">Payment</option>
<option value="Receipt" ng-click="f1()">Receipt</option>
</select></td>
除此之外，对于ng-model="payterm"，你应该使用：
$scope.payterm
进行双向绑定。
答案 1 :(得分：0)
我认为您在这里要使用的是ng-change指令
<强> HTML
<td><select ng-controller="SelectCtrl" id="payterm" ng-model="payterm" ng-change="someFunc()">
<option value="Payment">Payment</option>
<option value="Receipt"">Receipt</option>
</select></td>
<强> JS
angular.controller('SelectCtrl', ['$scope', function($scope) {
$scope.payterm = "";
$scope.someFunc = function() {
// do something
console.log($scope.payterm);
};
]);
答案 2 :(得分：0)
问题是f1方法在角度范围之外运行。 当f1正在运行时，Angular不知道发生了什么，这就是为什么gui行为不正确。
但是，你的解决方案的主要问题是为什么f1存在？ 如果您只对确定在付款方式和付款中选择哪些选项的方法感兴趣，则可以执行此操作， 这也是推荐的，纯粹的角度。
这是一个例子
angular.module('TestApp', []);
angular.module('TestApp').controller('PaymentController', function($scope) {
$scope.payterms = [{name: 'Payment'}, {name: 'Receipt'}];
$scope.payments = [{name: 'Cash'}, {name: 'Bank'}];
});
angular.module('TestApp').controller('CustomerController',
function($scope) {
$scope.customers = [
{name: 'customer1'},
{name: 'customer2'}];
});
angular.module('TestApp').controller('SupplierController',
function($scope) {
$scope.suppliers = [
{name: 'supplier1'},
{name: 'supplier2'}];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="TestApp" ng-controller="PaymentController">
<select ng-model="payterm" ng-options="item.name for item in payterms">
<option value="">--select--</option>
</select>
<select ng-model="payment" ng-options="item as item.name for item in payments">
<option value="">--select--</option>
</select>
<div ng-show="payment" ng-controller="CustomerController">
Customers
<select ng-model="customer" ng-options="item as item.name for item in customers">
<option value="">--select--</option>
</select>
</div>
<div ng-show="payterm" ng-controller="SupplierController">
Suppliers
<select ng-model="supplier" ng-options="item as item.name for item in suppliers">
<option value="">--select--</option>
</select>
</div>
</div>