在AngularJS中动态更改选项值时，选择选项未正确反映

我在html中有一个选项框，我正在尝试使用Angularjs设置该选项。但它不起作用。请查找下面的代码。如果我在控制台中调用代码，并且我能够看到预期的html正在返回。也就是说，这些更改在DOM中会受到适当的影响，但不会反映在UI中

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>

angular.module（'TestApp'，[]）；
var=false；
var选择客户；
var供应商=假；
选择供应商；
角度。模块（'TestApp'）。控制器（'CustomerController'，
功能（$scope，CustomerService）{
$scope.callCustomer=函数（）{
如果（客户==错误）{
log（“我正在进行客户ajax呼叫”）；
客户=真实；
$scope.selected=[]；
CustomerService.getCustomers（）.then（函数（serverdata）{
选择Customer=serverdata.data；
$scope.selected=selectCustomer；
}，函数（错误）{
警报（“数据加载失败”）；
console.log（错误）；
});
}否则{
log（“所选客户为”+$scope.selected）；
$scope.selected=selectCustomer；
log（“所选客户为”+$scope.selected）；
log（“我不在客户ajax呼叫中”）；
}
}
});
角度.module（'TestApp'）。服务(
“客户服务”，
函数（$http）{
this.getCustomers=函数（）{
返回$http.get（“http://”+document.location.host
+“/SivaTask/getCustomer”）；
}
});
// ====================================================================
角度。模块（'TestApp'）。控制器（'SupplierController'，
功能（范围、供应商服务）{
$scope.callSupplier=函数（）{
如果（供应商==错误）{
log（“我在供应商ajax呼叫中”）；
$scope.selected=[]；
供应商=正确；
SupplierService.getSuppliers（）.then（函数（serverdata）{
选择supplier=serverdata.data；
$scope.selected=选择供应商；
}，函数（错误）{
警报（“数据加载失败”）；//用户
console.log（错误）；
});
}否则{
$scope.selected=选择供应商；
log（“我不在供应商ajax呼叫”）；
}
}
});
角度.module（'TestApp'）。服务(
“供应商服务”，
函数（$http）{
this.getSuppliers=函数（）{
返回$http.get（“http://”+document.location.host
+“/SivaTask/getSupplier”）；
}
});
// ===================================================================
函数f1（）{
//警惕（“你好”）；
console.log（document.getElementById（“payterm”）.value）；
var值=document.getElementById（“payterm”）.value；
如果（值=‘付款’）{
var scope=angular.element（document.getElementById（“customerController”））.scope（）；
scope.callCustomer（）；
}else if（值=‘收据’）{
var scope=angular.element(
document.getElementById（“供应商控制器”））.scope（）；
scope.callSupplier（）；
}否则{
警报（“无效选择”）；
}
};

付款
收据
现金
银行
{{select}}
+
对于AngularJS，尝试使用
ng单击
而不是
onclick
：

   <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 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>

问题在于f1方法在角度范围之外运行。
Angular不知道f1运行时会发生什么，这就是gui无法正常运行的原因

但是，你的解决方案的主要问题是为什么f1存在？
如果您只对确定在付款条件和付款中选择哪些选项的方法感兴趣，您可以这样做，
也建议使用纯angularjs

这里有一个例子


angular.module（'TestApp'，[]）；
角度。模块（'TestApp'）。控制器（'PaymentController'，函数（$scope）{
$scope.payterms=[{name:'Payment'}，{name:'receive'}]；
$scope.payments=[{name:'Cash'}，{name:'Bank'}]；
});
角度。模块（'TestApp'）。控制器（'CustomerController'，
职能（$范围）{
$scope.customers=[
{name:'customer1'}，
{name:'customer2'}]；
});
角度。模块（'TestApp'）。控制器（'SupplierController'，
职能（$范围）{
$scope.suppliers=[
{name:'供应商1'}，
{name:'供应商2'}]；
});

--挑选--
--挑选--
客户
--挑选--
供应商
--挑选--
我仍然面临同样的问题。控制台上显示了正确的数据。但在UI中没有反映。当用户第一次选择“付款”时，会自动显示付款详细信息。但如果用户选择其他选项，请说“收据”，然后再次选择“付款”，UI上只显示收据详细信息。付款明细未显示。
angular.controller('SelectCtrl', ['$scope', function($scope) {
    $scope.payterm = ""; 
    $scope.someFunc = function() {
      // do something
      console.log($scope.payterm);
    };
]);