Angulajs: Wie man einen Filter anwendet, indem man nach dem Klicken auf "Speichern" das Formular auswählt?

In der Tabelle zeige ich Name, Bezeichnung und Firma der Angestellten an. Ich möchte das ausgewählte Formular verwenden, um den Namen des Unternehmens auszuwählen. Wenn ich den Namen des Unternehmens auswähle und dann auf "Speichern" als Ergebnis klicke, möchte ich nur Namen, Bezeichnungen und Unternehmen von Mitarbeitern anzeigen, die beispielsweise für Google arbeiten. Auch möchte ich die Anzahl angezeigt haben, wie viele Mitarbeiter es ist.Angulajs: Wie man einen Filter anwendet, indem man nach dem Klicken auf "Speichern" das Formular auswählt?

Aber kinnda blieb stecken mein Speicherknopf funktioniert nicht, und auch nicht die Anzahl der Mitarbeiter.

file.html

<body 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"> 
      <td>{{$index + 1}}</td> 
      <td>{{employee.name}}</td> 
      <td>{{employee.designation}}</td> 
      <td>{{employee.company.name}}</td> 
      </tr> 
      </table> 

    </div> 
<div> 
    <ul> 
     <li> 
     <h2>Select Company:</h2> 

      <select ng-model="selectedCompany"> 
      <option ng-repeat="c in companyList" value="{{c.name}}">{{c.name}}</option> 
      </select> 

      <h3>You selected: {{selectedCompany}}</h3> 


     </li> 
    </ul> 
     <button ng-click="$ctrl.updateSearch()">Filter</button> 
    </div> 
</body>

file.js

var controllers = angular.module('MyApp.controllers', []) 
     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.companyList = [{ 
         name: 'Apple', 
         slug: 'Apple' 
         }, { 
         name: 'Google', 
         slug: 'Google' 
         }, { 
         name: 'Microsoft', 
         slug: 'Microsoft' 
         }, { 
         name: 'Facebook', 
         slug: 'Facebook' 
         }, 

        ]; 
        $scope.updateSearch = function() { 
        console.log($scope.selectedCompany); 

    } 

     });

Quelle

2016-11-07 Anonymous

Ist das Ihr versucht, auf Eingangswerte zu erhalten klicken Schaltfläche speichern? –

Sie möchten die ausgewählten Werte erhalten? – Sajeetharan

Ich habe eine Gruppe von ausgestellten Hemden. Also was ich versuche zu erreichen ist, wenn ich zum Beispiel Farbe auswählen: blau Größe: M und Marke: Nike und dann auf Speichern Schaltfläche, ich bekomme Listen aller verfügbaren Shirts in Farbe: blau Größe: M und Marke: Nike. –

Es gibt braucht einige Änderungen auf Ihrer Ansicht nach getan werden, Variablen ändern Modell aus dem Array-Namen, anders zu sein, wie zum Beispiel Farben, Sizzen und Brandn.

<div> 
    <label>Color:</label> 
    <select ng-model="colorn" ng-options="option.name for option in colorStatus track by option.slug"></select> 
</div> 
<div> 
    <label>Size</label> 
    <select ng-model="sizen" ng-options="option.name for option in size track by option.slug"></select> 
</div> 
<div> 
    <label>Brand</label> 
    <select ng-model="brandn" ng-options="option.name for option in $ctrl.brand track by option.slug"></select> 
</div> 
    <button ng-click="updateSearch()">Save</button>

Auch können Sie die Werte mit Ihrem $ scope Variable erhalten,

-Controller

$scope.updateSearch = function(){ 
console.log($scope.colorn); 
console.log($scope.sizen); 
console.log($scope.sizen); 
}

DEMO

Quelle

2016-11-07 17:10:49 Sajeetharan

Hy Ich habe meine Frage bearbeitet. Kannst du es jetzt anschauen? Habe Sie updateSearch Funktion Lösung angewendet, aber es funktioniert nicht. –

Angulajs: Wie man einen Filter anwendet, indem man nach dem Klicken auf "Speichern" das Formular auswählt?

Antwort

Verwandte Themen