Angularjs双向数据绑定 - ngChange

时间:2018-06-06 17:28:27

标签: angularjs

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

我的表单包含一些列表,例如list1,list2 ...... list1从db获取其项目。一旦用户选择list1中的项目,ng-change获取触发器,list2的数据生成geenrates。这意味着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/

1 个答案:

答案 0 :(得分:1)

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

&#13;
&#13;
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;
      }
      }
  }  
}
&#13;
&#13;
&#13;  我们在视图模式和更新模式的所需控制器中调用它。  **(AngularJS新手)