时间戳

首页 > 解决方案 > Angularjs 双向数据绑定 - ngChange

angularjs - Angularjs 双向数据绑定 - ngChange

问题描述

我正在开发一个项目，该项目具有使用 html 和 angularjs 的 Web 表单，后端使用 java/spring 和 db oracle。

我的表单包含几个列表说 list1,list2... list1 从 db 获取它的项目。一旦用户选择 list1 中的项目，ng-change 就会获得触发器和 list2 生成的数据。这意味着 list2 的值取决于 list1 ng-change 指令。填写所有必填字段后，我将表单保存在 db 中。

现在我给用户一个规定，他们可以在那里看到填充的细节。因此，一旦他们点击“编辑”，他们就可以看到他们的所有详细信息。我正在使用 ng-model 绑定数据。所有字段都在工作，并且将值从 db 绑定到 html webform，list2 除外。任何人都可以展示我们如何实现这一目标。

当用户想要在可编辑模式下查看他的请求时，我遇到了隐藏/显示功能的一些问题。请提出一些解决方法。

<div ng-app="myApp" ng-controller="myCtrl">
<label>List1:</label>
<select ng-model="selectedName" ng-change="getList()" ng-options="item for item in names">
</select>
<br>
<label>List2:</label>
<select ng-model="selectedNcomany" ng-options="item for item in comany">
</select>
<button ng-click="editText()">
Edit
</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    var db = {};
    $scope.getList = function(){

   if($scope.selectedName == "Linus"){
   $scope.comany = ["!","2"];

   }
   else{
     $scope.comany =["0"]
   }
    }
     $scope.editText = function(){
        $scope.selectedName = "Linus";
        $scope.selectedNcomany = "1";
     }
});
</script>

https://jsfiddle.net/31d8cv92/12/

标签： angularjs

解决方案

我在类似的环境中工作，我们创建了一个看起来像这样的服务显示字段

angular.module('test').service('showField',showField);

function showField(){
  
  this.showfield = function(fieldData,pagemode){
    if(angular.isDefined(fieldData) && fieldData.hasOwnProperty('hide')){
      if (fieldData.hide) {
        if (fieldData.npi) {
          if (pagemode == 'view') {
            return false;
          }else {
          return true;
          }
        } else {
          return false;
        }
      } else {
        return true;
      }
      }
  }  
}
我们在视图模式和更新模式所需的控制器中调用它。**（AngularJS 新手）

推荐阅读