Angularjs two way data binding - ngChange

Question

I am working on a project which is having a web form using html and angularjs the backend using java/spring and db oracle.

My form contains few lists say list1,list2... list1 get its items from db. As soon as user selects the item in list1 ng-change gets trigger and data for list2 geenrates.That means list2 values depends on list1 ng-change directive.After filling all required fields I am saving the form in db.

Now I am giving user a provison that they can see there filled details . So once they click on "edit" they can see all their details. I am using ng-model to bind the data .All fields are working and binding values form db to the html webform except for list2. Can anyone show how can we achieve this.

I am having some issues with hide/show functionality when user wants to see his request in editable mode. Please suggest some workaround.

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

generally, you write code to fix these things. Attaching your relevant front-end code to the question will help to provide more informative answer. — Vladimir M, Jun 06 '18 at 17:32
so, list2 has a very common problem for angularjs - you change the reference to the array, instead of updating the array. same root cause as for: https://stackoverflow.com/questions/29849293/ng-repeat-not-updating-on-update-of-array — Vladimir M, Jun 06 '18 at 18:12

score 1 · Accepted Answer · answered Jun 06 '18 at 18:30

I work in the similar environment we created a service show field which looks like this

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

We invoke this in our required controllers for view mode and update mode. **(New to AngularJS)

Angularjs two way data binding - ngChange

1 Answers1