user3599620 user3599620 - 28 days ago 11
AngularJS Question

Angularjs: how to make function that will save changes in select form and apply them on table?

I'm trying to make function that will save changes made in select form and apply them to my table.
In table I'm displaying name, designation and company of employees. I want to use select form to select the name of company. When I select company name and then click save button as result I only want to display names, designations and company of employees that for example work for Google. Also I want to have displayed number of how many rows I have in table after filtering the table.

Code I have so far is here:

data.html

<div ng-app="MyApp" ng-controller="MyController">

<div>
<table>
<tr>
<th style="width:10%">#</th>
<th style="width:20%">Name</th>
<th style="width:40%">Designation</th>
<th style="width:30%">Company</th>
</tr>
<tr ng-repeat="employee in clients | filter:searchText">
<td>{{$index + 1}}</td>
<td>{{employee.name}}</td>
<td>{{employee.designation}}</td>
<td>{{employee.company.name}}</td>
</tr>
</table>

</div>

<div>

<h2>Select Company:</h2>

<select ng-model="searchText.company.name">
<option ng-repeat="c in clients" value="{{c.company.name}} ">{{c.company.name}}</option>
</select>

<h3>You selected: {{searchText.company.name}</h3>

<button ng-click="updateSearch()">Save</button>
<b>input: {{searchText.company.name}}</b>
</div>

</div>


data.js

var controllers = angular.module('MyApp', [])
controllers.controller('MyController', function ($scope) {


$scope.clients = [{
name: 'Brett',
designation: 'Software Engineer',
company: {
name: 'Apple'
}
}, {
name: 'Steven',
designation: 'Database Administrator',
company: {
name: 'Google'
}
}, {
name: 'Jim',
designation: 'Designer',
company: {
name: 'Facebook'
}
}, {
name: 'Michael',
designation: 'Front-End Developer',
company: {
name: 'Apple'
}
}, {
name: 'Josh',
designation: 'Network Engineer',
company: {
name: 'Google'
}
}, {
name: 'Ellie',
designation: 'Internet Marketing Engineer',
company: {
name: 'Apple'
}
}];


$scope.updateSearch = function() {
console.log($scope.searchText.company.name);

}

});


Now I'm selecting company name immediately after choosing it from select form, but I want it to be applied after clicking on save button.
If anybody can help, thanks!

Answer

Hope this below code snippet helps you ! Its pretty much self explanatory.

UPDATE

To display count use below syntax in ng-repeat

<tr ng-repeat="employee in filteredList = (clients | filter:searchText)">

var controllers = angular.module('MyApp', [])
controllers.controller('MyController', function($scope) {

  $scope.selected ={};
  $scope.searchText ={}
  $scope.searchText.company={};
 $scope.filteredList =[];
  $scope.clients = [{
    name: 'Brett',
    designation: 'Software Engineer',
    company: {
      name: 'Apple'
    }
  }, {
    name: 'Steven',
    designation: 'Database Administrator',
    company: {
      name: 'Google'
    }
  }, {
    name: 'Jim',
    designation: 'Designer',
    company: {
      name: 'Facebook'
    }
  }, {
    name: 'Michael',
    designation: 'Front-End Developer',
    company: {
      name: 'Apple'
    }
  }, {
    name: 'Josh',
    designation: 'Network Engineer',
    company: {
      name: 'Google'
    }
  }, {
    name: 'Ellie',
    designation: 'Internet Marketing Engineer',
    company: {
      name: 'Apple'
    }
  }];
 $scope.orginalList = angular.copy($scope.clients);

  $scope.updateSearch = function() {
   $scope.searchText.company.name = $scope.selected.company;

  }

});
<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>


<div ng-app="MyApp" ng-controller="MyController">

  <div>
    <table>
      <tr>
        <th style="width:10%">#</th>
        <th style="width:20%">Name</th>
        <th style="width:40%">Designation</th>
        <th style="width:30%">Company</th>
      </tr>
      <tr ng-repeat="employee in filteredList = (clients | filter:searchText)">
        <td>{{$index + 1}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.designation}}</td>
        <td>{{employee.company.name}}</td>
      </tr>
    </table>
    Count : {{filteredList.length}}/{{orginalList.length}}
  </div>

  <div>

    <h2>Select Company:</h2>

    <select ng-model="selected.company">
      <option ng-repeat="c in clients" value="{{c.company.name}} ">{{c.company.name}}</option>
    </select>

    <h3>You selected: {{selected.company}}</h3>

    <button ng-click="updateSearch()">Save</button>
    <b>input: {{searchText.company.name}}</b>
  </div>

</div>