Question

如何在angularjs中制作自定义过滤器，以便根据1个标准过滤数据，并在另一个模型中显示相应的数据。在dis代码中，我想显示与费用相对应的主题名称，如果我输入165费用，那么主题名称模型应该显示数学。

<html>
   <head>
      <title>Angular JS Filters</title>
   </head>
   <body>
     <h2>AngularJS Sample Application</h2>
     <div ng-app="" ng-controller="studentController">

        <table border="0">
            <tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
            <tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
            <tr><td>Enter fees: </td><td><input type="text" ng-model="subjectFee"></td></tr>
            <tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
       </table>
       <br/>

       <table border="0">
       <tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
       <tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>

       <tr><td>Fee:</td><td>
          <ul>

             <li ng-repeat="subject in student.subjects | filter: subjectFee |orderBy:'marks'">
                 {{  ' fee:' + subject.fee }}
            </li>
         </ul>
      </td></tr>

      <tr><td>Subject:</td><td>
       <ul>

           <li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">
               {{ subject.name + ', marks:' + subject.marks +', fee:' + subject.fee  }}
         </li>
      </ul>
     </td></tr>
    </table>
   </div>

  </script>

  <script>
    function studentController($scope) {
       $scope.student = {
       firstName: "Mahesh",
       lastName: "Parashar",
       subjects:[
            {name:'Physics',marks:70, fee:170},
            {name:'Chemistry',marks:80, fee:180},
            {name:'Math',marks:65, fee:165}
       ],
       fullName: function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
       }
    };
  }
  </script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">  </script>
 </body>
</html>

Answer 1

您的代码中的以下更改可以生成所需的输出。

<li ng-repeat="subject in student.subjects | filter: (subjectFee || subjectName) |orderBy:'marks'">

如何在模型中显示与其他模型数据相对应的数据

1 个答案: