简体   繁体   English

(AngularJS)尽管使用了ng-model和以前的语法,但ng-options并未填充

[英](AngularJS) ng-options not populating despite ng-model and previously working syntax

Solved : Two part issue. 解决 :两部分问题。 As pointed out by Veera the model was not being stored correctly in the controller, and the major issue was to do with the Smart Table injection in the module declaration. 正如Veera指出的那样,模型未正确存储在控制器中,主要问题与模块声明中的Smart Table注入有关。


Previously my code below managed to produce a list from a drop down menu in ng-options. 以前,我下面的代码设法从ng-options的下拉菜单中生成列表。 After several seemingly unrelated changes were made it is now not working and I cannot for the life of me figure out why. 在进行了几项看似无关的更改之后,它现在不起作用了,我无法一生找出原因。

I understand a lot of people have an issue with ng-model in the select element so unless I've made a mistake and missed some syntax there I do not think this is the issue as it was working. 我知道很多人在select元素中都有ng-model的问题,因此除非我犯了一个错误并错过了一些语法,否则我认为这不是问题,因为它正在起作用。

I am trying to populate the list with a "Ref Number" from an array in the controller. 我正在尝试使用控制器中的数组中的“引用号”填充列表。 There may be some typos in variable names and data where I've changed them from the ones I'm using in my actual project. 在变量名称和数据中可能存在一些错别字,而我在实际项目中使用的错别字。

 var reqWebApp = angular.module('reqWebApp', ['smart-table']); reqWebApp.controller('reqAppController', function reqAppController($scope) { $scope.requests = [ { ref : "000455", status : "requested", prod : "BLEH", prodRef : "NAH8754", prodSite : "BLEHTON" } { ref : "003005", status : "requested", prod : "REDACTED", prodRef : "NA78546", prodSite : "REDVILLE" } ]; }); 
 <!DOCTYPE html> <html lang="en" ng-app="reqWebbApp"> <head> <meta charset="UTF-8"> <title>Pre-Acceptance</title> <script src="../../bower_components/angular/angular.js"></script> <script src="../../app.js"></script> <style> table { width: 90%; } input { width: 95%; } select { width: 100%; } </style> </head> <body ng-controller="reqAppController"> <div style="display:inline">Pre-Accept Existing Request | <table style="display:inline-table; width: 5%" border="1" > <tr> <th> Ref No. </th> </tr> <tr> <th> <select ng-model="references" ng-options="request.ref for request in requests"> <option value=""></option> </select> </th> </tr> </table> </div> <button type="button" onclick="location.href='../home/homepage.html'">ACCEPT</button> <button type="button" onclick="location.href='../home/homepage.html'">HOME</button> </body> </html> 

Thanks for anyone's time to look through it. 感谢您抽出宝贵的时间仔细阅读它。 Connor 康纳

Change ng-model as object and declare in controller 将ng-model更改为对象并在控制器中声明

HTML

 <select ng-model="selected.selectedReference"
  ng-options="request.ref for request in requests">
   <option value=""></option>
 </select>

JS

 $scope.selected = {};

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM