javascript - 如何在对象数组的 select 标记中的 ng-model 中设置对象值。是否有一种简单的方法可以在 ng-options 上添加过滤器,

标签 javascript angularjs

这是我的 html :

<body ng-controller="myCtrl">

     {{loadDataSubject('${subjectList}')}}
     {{loadDataTopic('${topicList}')}}



<h1 class = "bg-success" style="color: red;text-align: center">Fill in the below details for Question Template : -</h1> <br> 

<div class="container">

  <form method="get" action="createTemplate">
    <div class="form-group">

    <label for="sel1">Topics (select one):</label>
     <select class="form-control" ng-model="selectedTopic" ng-options="topic.name as topic.name for topic in topics">
    </select> <br>

    {{selectedTopic}}

      <label for="sel1">Subject (select one):</label>

     <select name="subject" value= "" class="form-control" ng-model ="selectedSubject" ng-options="sub.name as sub.name for sub in subjects">
    </select> <br>

      <label for="sel1">Negative marking:</label>
      <select class="form-control" name="negativeMarks">
        <option>Yes</option>
        <option>No</option>
      </select> <br>

      <label>Reference Book:</label>
       <input type="text" class="form-control" name="ref" required>
      <label for="sel1">Number of Questions:</label>
       <input type="number" class="form-control" name="questionCount" required><br>

       <input class ="bg-primary" type="submit" value="submit and download template">

    </div>
  </form>
</div>


</body>

这是脚本:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

    $scope.subjects = [];
    $scope.topics = [];
    $scope.selectedSubject = {};
    $scope.selectedTopic = {};


    $scope.loadDataSubject = function(subjectList) {
          $scope.subjects = JSON.parse(subjectList);
        };

    $scope.loadDataTopic = function(topicList) {
          $scope.topics = JSON.parse(topicList);
        };  
});

我想在选项中添加一个过滤器以仅选择所选主题的主题, 类似过滤器的东西:selectedTopic.id

错误是

angular.js:38 Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…turn%20b(f%2Cc%2Ce)%7D%22%2C%22newVal%22%3A74%2C%22oldVal%22%3A68%7D%5D%5D
    at angular.js:38
    at r.$digest (angular.js:15934)
    at r.$apply (angular.js:16160)
    at angular.js:1679
    at Object.e [as invoke] (angular.js:4523)
    at c (angular.js:1677)
    at yc (angular.js:1697)
    at Zd (angular.js:1591)
    at angular.js:29013
    at HTMLDocument.b (angular.js:3057) 

在此之前,我想将对象的值绑定(bind)到 ng-model,同时绑定(bind)对象名称。请帮助我,我是新手。

科目: [{"subjectId":1,"name":"ComputerScience","code":"CS"},{"subjectId":2,"name":"计算机基础","code":"CS","documentUrl":"None"},{"subjectId":3,"name":"计算机基础","code":"CS","documentUrl":"None"},{"subjectId":4,"name ":"php","code":"PHP01","documentUrl":"None"},{"subjectId":5,"name":"JAVA","code":"JAVA01","childSubjects": [{"subjectId":6,"name":"Core Java","code":"JAVA02","parentSubject":5,"childSubjects":[{"subjectId":8,"name":"线程","code":"JAVA04","parentSubject":6},{"subjectId":9,"name":"对象类","code":"JAVA05","parentSubject":6},{"subjectId ":10,"name":"Inheritance","code":"JAVA06","parentSubject":6}]},{"subjectId":7,"name":"Advance Java","code":"JAVA03","parentSubject":5,"childSubjects":[{"subjectId":11,"name":"Servlet","code":"JAVA07","parentSubject":7}]}]},{"subjectId":12,"name":"计算机基础","code":"CS","documentUrl":"None"}]

主题:

[{"topicId":1,"name":"Technical","code":"TECH","isSubjectsRelated":1,"description":"All Technical subjects","isActive":1,"subjects":[{"subjectId":1,"name":"ComputerScience","code":"CS"},{"subjectId":1,"name":"ComputerScience","code":"CS"}]},{"topicId":2,"name":"GATE","code":"GATE","isSubjectsRelated":1,"description":"GATE exam","isActive":1,"subjects ":[]},{"topicId":5,"name":"Programming","code":"PROG","isSubjectsRelated":0,"description":"编码技巧","isActive":1, “主题”:[{“主题 ID”:5,“名称”:“JAVA”,“代码”:“JAVA01”}]}]

最佳答案

将您的主题选择框更改为此

 <label for="sel1">Topics (select one):</label>
     <select class="form-control" ng-model="selectedTopic" ng-options="topic as topic.name for topic in topics">
    </select>

主题选择框也类似。查看this笨蛋。

关于javascript - 如何在对象数组的 select 标记中的 ng-model 中设置对象值。是否有一种简单的方法可以在 ng-options 上添加过滤器,,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43714894/

相关文章:

javascript - 如何将值从 Controller 传递给指令

javascript - 加载页面时如何使用 Angular 检查复选框?

javascript - 数据更改时 ng 类不刷新

javascript - 在 Angular Directive(指令)中使用 ng-repeat 过滤器

javascript - Ramda 建议从稍微嵌套的数组中删除重复项

javascript - 无法在 'requestAnimationFrame' : The callback provided as parameter 1 is not a function. 上执行 'Window'

javascript - 如何在 Pprod 上运行多个 Angular Directive(指令)模块

javascript - 替换函数内的 Espace 单/双引号

javascript - 尝试将生成的 PDF 文件从 React Js 发送到 Django-Rest Post 请求时未提交文件

javascript - 使用事件(作为函数)v4 的问题