AngularJS - ng-options不起作用。不要显示JSON响应

时间:2016-07-08 16:25:13

标签: angularjs angularjs-ng-options

我正在尝试显示响应JSON的值:

$http.get('index.php/administration/UsersAdminController/getAllDepartments')
    .then(function(response) {
        if(response.data.message == "success") {
            $scope.departments = response.data.data;
        }
    });

当我使用ng-repeat时,JSON显示如下:

<div ng-repeat="values in departments">
    {{values}}
</div>

告诉我这个:

{"id":1,"name":"Computación","description":"Departamento","positions":[
                                                                             {"id":1,"name":"Estudiante","description":"Yo soy un estudiante"},                  
                                                                             {"id":2,"name":"Profesor","description":"Educador"}]}
{"id":2,"name":"Quimica","description":"Departamento de quimica","positions":[
                                                                                    {"id":3,"name":"Quimico","description":"Soy un quimico"},
                                                                                    {"id":4,"name":"Farmaco","description":"Farmaco del dpto de quimica"}]}

我需要的是,现在,它是在选择中将名称显示为选项。

我已经尝试过各种方式,使用ng-repeat和ng-options并且无法工作。当我点击选择没有任何反应。

<select ng-model="newDepartment" ng-options="key as value for (key , valu) in departments"></select>

<select ng-model="ciudadElegida" ng-options="departmet as department.name for department in departments"></select>

我认为这是ng-options值的一部分,但我无法弄明白。

Pd:我已经用

实现了脚本
$('select').material_select();

编辑:回应贾斯汀赫特

感谢您的帮助!我使用$scope.departments = JSON.stringify(response.data.data);然后显示部门console.log($scope.departments)

的内容

告诉我这个:

[{"id":1,"name":"Computación","description":"Departamento","positions":[{"id":1,"name":"Estudiante","description":"Yo soy un estudiante"},{"id":2,"name":"Profesor","description":"Educador"}]},{"id":2,"name":"Quimica","description":"Departamento de quimica","positions":[{"id":3,"name":"Quimico","description":"Soy un quimico"},{"id":4,"name":"Farmaco","description":"Farmaco del dpto de quimica"}]}]

这正是你对部门的意义,所以应该工作,但事实并非如此。再次,当我点击选择选项nathing发生。我开始严格地讨论可能导致这个问题的物化导入的事实。

编辑2:解决方案

问题始终是物化和角度js之间不兼容。

Angular不允许在实例化后修改项目。每次更新select函数时,Materialise都需要$('select').material_select();

解决方案是添加一个带有指令的文件,这样每次编辑select时都会执行materialize函数和angular的重新编译。

/js文件夹中保存带有以下内容的.js脚本:

(function(e){var i;e.module("ui.materialize",["ui.materialize.ngModel","ui.materialize.collapsible","ui.materialize.toast","ui.materialize.sidenav","ui.materialize.material_select","ui.materialize.dropdown","ui.materialize.inputfield","ui.materialize.input_date","ui.materialize.tabs","ui.materialize.pagination","ui.materialize.pushpin","ui.materialize.scrollspy","ui.materialize.parallax","ui.materialize.modal","ui.materialize.tooltipped","ui.materialize.slider","ui.materialize.materialboxed","ui.materialize.scrollFire","ui.materialize.nouislider","ui.materialize.input_clock"]);e.module("ui.materialize.scrollFire",[]).directive("scrollFire",["$compile","$timeout",function(i,n){return{restrict:"A",scope:{offset:"@",scrollFire:"&"},link:function(i,n,a){var o=i.offset;if(!e.isDefined(i.offset)){o=0}o=Number(o)||0;var r=false;var l=t(function(){if(r){return}var e=window.pageYOffset+window.innerHeight;var t=n[0].getBoundingClientRect().top+window.pageYOffset;if(e>t+o){r=true;i.scrollFire({});s()}},100);function s(){$(window).off("scroll resize blur focus",l)}$(window).on("scroll resize blur focus",l);l();i.$on("$destroy",s)}}}]);function t(e,i){var t,n,a,o;var r=0;var l=function(){r=+new Date;t=null;o=e.apply(n,a);if(!t)n=a=null};var s=function(){var s=+new Date;var u=i-(s-r);n=this;a=arguments;if(u<=0||u>i){if(t){clearTimeout(t);t=null}r=s;o=e.apply(n,a);if(!t)n=a=null}else if(!t){t=setTimeout(l,u)}return o};s.cancel=function(){clearTimeout(t);r=0;t=n=a=null};return s}e.module("ui.materialize.ngModel",[]).directive("ngModel",["$timeout",function(e){return{restrict:"A",priority:-1,link:function(t,n,a){t.$watch(a.ngModel,function(t,a){e(function(){if(t instanceof Array&&a instanceof Array){if(t.length==a.length){return}}if(t){n.trigger("change")}else if(n.attr("placeholder")===i){if(!n.is(":focus"))n.trigger("blur")}})})}}}]);e.module("ui.materialize.slider",[]).directive("slider",["$timeout",function(i){return{restrict:"A",scope:{height:"=",transition:"=",interval:"=",indicators:"="},link:function(t,n,a){n.addClass("slider");i(function(){n.slider({height:e.isDefined(t.height)?t.height:400,transition:e.isDefined(t.transition)?t.transition:500,interval:e.isDefined(t.interval)?t.interval:6e3,indicators:e.isDefined(t.indicators)?t.indicators:true})})}}}]);e.module("ui.materialize.collapsible",[]).directive("collapsible",["$timeout",function(e){return{link:function(i,t,n){e(function(){t.collapsible()});if("watch"in n){i.$watch(function(){return t[0].innerHTML},function(i,n){if(i!==n){e(function(){t.collapsible()})}})}}}}]);e.module("ui.materialize.parallax",[]).directive("parallax",["$timeout",function(e){return{link:function(i,t,n){e(function(){t.parallax()})}}}]);e.module("ui.materialize.toast",[]).constant("toastConfig",{duration:3e3}).directive("toast",["toastConfig",function(i){return{scope:{message:"@",duration:"@",callback:"&"},link:function(t,n,a){n.bind(a.toast,function(){var n=e.isDefined(t.message)?t.message:"";var o=e.isDefined(a.toastclass)?a.toastclass:"";Materialize.toast(n,t.duration?t.duration:i.duration,o,t.callback)})}}}]);e.module("ui.materialize.pushpin",[]).directive("pushpin",[function(){return{restrict:"AE",require:["?pushpinTop","?pushpinOffset","?pushpinBottom"],link:function(e,i,t){var n=t.pushpinTop||0;var a=t.pushpinOffset||0;var o=t.pushpinBottom||Infinity;setTimeout(function(){i.pushpin({top:n,offset:a,bottom:o})},0)}}}]);e.module("ui.materialize.scrollspy",[]).directive("scrollspy",["$timeout",function(e){return{restrict:"A",link:function(i,t,n){t.addClass("scrollspy");e(function(){t.scrollSpy()})}}}]);e.module("ui.materialize.tabs",[]).directive("tabs",["$timeout",function(e){return{scope:{reload:"="},link:function(i,t,n){t.addClass("tabs");e(function(){t.tabs()});i.$watch("reload",function(e){if(e===true){t.tabs();i.reload=false}})}}}]);e.module("ui.materialize.sidenav",[]).directive("sidenav",[function(){return{scope:{menuwidth:"@",closeonclick:"@"},link:function(t,n,a){n.sideNav({menuWidth:e.isDefined(t.menuwidth)?parseInt(t.menuwidth,10):i,edge:a.sidenav?a.sidenav:"left",closeOnClick:e.isDefined(t.closeonclick)?t.closeonclick=="true":i})}}}]);e.module("ui.materialize.material_select",[]).directive("materialSelect",["$compile","$timeout",function(t,n){return{link:function(t,a,o){if(a.is("select")){function r(e,n){if(o.multiple){if(n!==i&&e!==i){if(n.length===e.length){return}}var r=a.siblings("ul.active");if(e!==i&&r.length){var l=r.children("li.active").length;if(l==e.length){return}}}else{if(e==a.val()){return}}a.siblings(".caret").remove();t.$evalAsync(function(){a.material_select(function(){if(!o.multiple){$("input.select-dropdown").trigger("close")}});var e=function(e){if(e.clientX>=e.target.clientWidth||e.clientY>=e.target.clientHeight){e.preventDefault()}};a.siblings("input.select-dropdown").on("mousedown",e)})}n(r);if(o.ngModel){if(o.ngModel&&!e.isDefined(t.$eval(o.ngModel))){var l=false;t.$watch(o.ngModel,function(i,n){if(!l&&e.isDefined(t.$eval(o.ngModel))){l=true;r()}else{r(i,n)}})}else{t.$watch(o.ngModel,r)}}if("watch"in o){t.$watch(function(){return a[0].innerHTML},function(e,i){if(e!==i){n(r)}})}}}}}]);e.module("ui.materialize.dropdown",[]).directive("dropdown",["$timeout",function(t){return{scope:{inDuration:"@",outDuration:"@",constrainWidth:"@",hover:"@",alignment:"@",gutter:"@",belowOrigin:"@"},link:function(n,a,o){t(function(){a.dropdown({inDuration:e.isDefined(n.inDuration)?n.inDuration:i,outDuration:e.isDefined(n.outDuration)?n.outDuration:i,constrain_width:e.isDefined(n.constrainWidth)?n.constrainWidth:i,hover:e.isDefined(n.hover)?n.hover:i,alignment:e.isDefined(n.alignment)?n.alignment:i,gutter:e.isDefined(n.gutter)?n.gutter:i,belowOrigin:e.isDefined(n.belowOrigin)?n.belowOrigin:i})})}}}]);e.module("ui.materialize.inputfield",[]).directive("inputField",["$timeout",function(i){return{transclude:true,scope:{},link:function(t,n){i(function(){Materialize.updateTextFields();n.find("> > .materialize-textarea").each(function(){var e=$(this);e.addClass("materialize-textarea");e.trigger("autoresize");var n=e.attr("ng-model");if(n){t.$parent.$watch(n,function(t,n){if(t!==n){i(function(){e.trigger("autoresize")})}})}});n.find("> > .materialize-textarea, > > input").each(function(i,t){t=e.element(t);if(!t.siblings('span[class="character-counter"]').length){t.characterCounter()}})})},template:'<div ng-transclude class="input-field"></div>'}}]);e.module("ui.materialize.input_date",[]).directive("inputDate",["$compile","$timeout",function(t,n){var a=$("<style>#inputCreated_root {outline: none;}</style>");$("html > head").append(a);var o=function(){var e=/d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,t=/\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,n=/[^-+\dA-Z]/g,a=function(e,i){e=String(e);i=i||2;while(e.length<i){e="0"+e}return e};return function(r,l,s){var u=o;if(arguments.length===1&&Object.prototype.toString.call(r)=="[object String]"&&!/\d/.test(r)){l=r;r=i}r=r?new Date(r):new Date;if(isNaN(r))throw SyntaxError("invalid date");l=String(u.masks[l]||l||u.masks["default"]);if(l.slice(0,4)=="UTC:"){l=l.slice(4);s=true}var c=s?"getUTC":"get",d=r[c+"Date"](),f=r[c+"Day"](),m=r[c+"Month"](),p=r[c+"FullYear"](),g=r[c+"Hours"](),v=r[c+"Minutes"](),h=r[c+"Seconds"](),y=r[c+"Milliseconds"](),D=s?0:r.getTimezoneOffset(),b={d:d,dd:a(d),ddd:u.i18n.dayNames[f],dddd:u.i18n.dayNames[f+7],m:m+1,mm:a(m+1),mmm:u.i18n.monthNames[m],mmmm:u.i18n.monthNames[m+12],yy:String(p).slice(2),yyyy:p,h:g%12||12,hh:a(g%12||12),H:g,HH:a(g),M:v,MM:a(v),s:h,ss:a(h),l:a(y,3),L:a(y>99?Math.round(y/10):y),t:g<12?"a":"p",tt:g<12?"am":"pm",T:g<12?"A":"P",TT:g<12?"AM":"PM",Z:s?"UTC":(String(r).match(t)||[""]).pop().replace(n,""),o:(D>0?"-":"+")+a(Math.floor(Math.abs(D)/60)*100+Math.abs(D)%60,4),S:["th","st","nd","rd"][d%10>3?0:(d%100-d%10!=10)*d%10]};return l.replace(e,function(e){return e in b?b[e]:e.slice(1,e.length-1)})}}();o.masks={"default":"ddd mmm dd yyyy HH:MM:ss",shortDate:"m/d/yy",mediumDate:"mmm d, yyyy",longDate:"mmmm d, yyyy",fullDate:"dddd, mmmm d, yyyy",shortTime:"h:MM TT",mediumTime:"h:MM:ss TT",longTime:"h:MM:ss TT Z",isoDate:"yyyy-mm-dd",isoTime:"HH:MM:ss",isoDateTime:"yyyy-mm-dd'T'HH:MM:ss",isoUtcDateTime:"UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"};o.i18n={dayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","January","February","March","April","May","June","July","August","September","October","November","December"]};Date.prototype.format=function(e,i){return o(this,e,i)};var r=function(e){if(Object.prototype.toString.call(e)==="[object Date]"){return!isNaN(e.getTime())}return false};return{require:"ngModel",scope:{container:"@",format:"@",formatSubmit:"@",monthsFull:"@",monthsShort:"@",weekdaysFull:"@",weekdaysShort:"@",weekdaysLetter:"@",firstDay:"=",disable:"=",today:"=",clear:"=",close:"=",selectYears:"=",onStart:"&",onRender:"&",onOpen:"&",onClose:"&",onSet:"&",onStop:"&",ngReadonly:"=?",max:"@",min:"@"},link:function(a,o,l,s){s.$formatters.unshift(function(i){if(i){var t=new Date(i);return e.isDefined(a.format)?t.format(a.format):t.format("d mmmm, yyyy")}return null});var u=e.isDefined(a.monthsFull)?a.$eval(a.monthsFull):i,c=e.isDefined(a.monthsShort)?a.$eval(a.monthsShort):i,d=e.isDefined(a.weekdaysFull)?a.$eval(a.weekdaysFull):i,f=e.isDefined(a.weekdaysShort)?a.$eval(a.weekdaysShort):i,m=e.isDefined(a.weekdaysLetter)?a.$eval(a.weekdaysLetter):i;t(o.contents())(a);if(!a.ngReadonly){n(function(){var t={container:a.container,format:e.isDefined(a.format)?a.format:i,formatSubmit:e.isDefined(a.formatSubmit)?a.formatSubmit:i,monthsFull:e.isDefined(u)?u:i,monthsShort:e.isDefined(c)?c:i,weekdaysFull:e.isDefined(d)?d:i,weekdaysShort:e.isDefined(f)?f:i,weekdaysLetter:e.isDefined(m)?m:i,firstDay:e.isDefined(a.firstDay)?a.firstDay:0,disable:e.isDefined(a.disable)?a.disable:i,today:e.isDefined(a.today)?a.today:i,clear:e.isDefined(a.clear)?a.clear:i,close:e.isDefined(a.close)?a.close:i,selectYears:e.isDefined(a.selectYears)?a.selectYears:i,onStart:e.isDefined(a.onStart)?function(){a.onStart()}:i,onRender:e.isDefined(a.onRender)?function(){a.onRender()}:i,onOpen:e.isDefined(a.onOpen)?function(){a.onOpen()}:i,onClose:e.isDefined(a.onClose)?function(){a.onClose()}:i,onSet:e.isDefined(a.onSet)?function(){a.onSet()}:i,onStop:e.isDefined(a.onStop)?function(){a.onStop()}:i};if(!a.container){delete t.container}var n=o.pickadate(t);var l=n.pickadate("picker");a.$watch("max",function(e){if(l){var i=new Date(e);l.set({max:r(i)?i:false})}});a.$watch("min",function(e){if(l){var i=new Date(e);l.set({min:r(i)?i:false})}});a.$watch("disable",function(i){if(l){var t=e.isDefined(i)&&e.isArray(i)?i:false;l.set({disable:t})}})})}}}}]);e.module("ui.materialize.input_clock",[]).directive("inputClock",[function(){return{restrict:"A",scope:{"default":"@",fromnow:"=?",donetext:"@",autoclose:"=?",ampmclickable:"=?",darktheme:"=?",twelvehour:"=?",vibrate:"=?"},link:function(i,t){$(t).addClass("timepicker");if(!i.ngReadonly){t.clockpicker({"default":e.isDefined(i.default)?i.default:"",fromnow:e.isDefined(i.fromnow)?i.fromnow:0,donetext:e.isDefined(i.donetext)?i.donetext:"Done",autoclose:e.isDefined(i.autoclose)?i.autoclose:false,ampmclickable:e.isDefined(i.ampmclickable)?i.ampmclickable:false,darktheme:e.isDefined(i.darktheme)?i.darktheme:false,twelvehour:e.isDefined(i.twelvehour)?i.twelvehour:true,vibrate:e.isDefined(i.vibrate)?i.vibrate:true})}}}}]);e.module("ui.materialize.pagination",[]).directive("pagination",["$sce",function(e){function i(e,i){e.List=[];e.Hide=false;e.page=parseInt(e.page)||1;e.total=parseInt(e.total)||0;e.dots=e.dots||"...";e.ulClass=e.ulClass||i.ulClass||"pagination";e.adjacent=parseInt(e.adjacent)||2;e.activeClass="active";e.disabledClass="disabled";e.scrollTop=e.$eval(i.scrollTop);e.hideIfEmpty=e.$eval(i.hideIfEmpty);e.showPrevNext=e.$eval(i.showPrevNext);e.useSimplePrevNext=e.$eval(i.useSimplePrevNext)}function t(e,i){if(e.page>i){e.page=i}if(e.page<=0){e.page=1}if(e.adjacent<=0){e.adjacent=2}if(i<=1){e.Hide=e.hideIfEmpty}}function n(e,i){i=i.valueOf();if(e.page==i){return}e.page=i;e.paginationAction({page:i});if(e.scrollTop){scrollTo(0,0)}}function a(i,t,a){var o=0;for(o=i;o<=t;o++){var r={value:e.trustAsHtml(o.toString()),liClass:a.page==o?a.activeClass:"waves-effect",action:function(){n(a,this.value)}};a.List.push(r)}}function o(i){i.List.push({value:e.trustAsHtml(i.dots)})}function r(e,i){a(1,2,e);if(i!=3){o(e)}}function l(i,t,a){if(!i.showPrevNext||t<1){return}var o,r,l;if(a==="prev"){o=i.page-1<=0;var s=i.page-1<=0?1:i.page-1;if(i.useSimplePrevNext){r={value:"<<",title:"First Page",page:1};l={value:"<",title:"Previous Page",page:s}}else{r={value:'<i class="material-icons">first_page</i>',title:"First Page",page:1};l={value:'<i class="material-icons">chevron_left</i>',title:"Previous Page",page:s}}}else{o=i.page+1>t;var u=i.page+1>=t?t:i.page+1;if(i.useSimplePrevNext){r={value:">",title:"Next Page",page:u};l={value:">>",title:"Last Page",page:t}}else{r={value:'<i class="material-icons">chevron_right</i>',title:"Next Page",page:u};l={value:'<i class="material-icons">last_page</i>',title:"Last Page",page:t}}}var c=function(t,a){i.List.push({value:e.trustAsHtml(t.value),title:t.title,liClass:a?i.disabledClass:"",action:function(){if(!a){n(i,t.page)}}})};c(r,o);c(l,o)}function s(e,i,t){if(t!=e-2){o(i)}a(e-1,e,i)}function u(e,n){if(!e.pageSize||e.pageSize<0){return}i(e,n);var o,u=e.adjacent*2,c=Math.ceil(e.total/e.pageSize);t(e,c);l(e,c,"prev");if(c<5+u){o=1;a(o,c,e)}else{var d;if(e.page<=1+u){o=1;d=2+u+(e.adjacent-1);a(o,d,e);s(c,e,d)}else if(c-u>e.page&&e.page>u){o=e.page-e.adjacent;d=e.page+e.adjacent;r(e,o);a(o,d,e);s(c,e,d)}else{o=c-(1+u+(e.adjacent-1));d=c;r(e,o);a(o,d,e)}}l(e,c,"next")}return{restrict:"EA",scope:{page:"=",pageSize:"=",total:"=",dots:"@",hideIfEmpty:"@",adjacent:"@",scrollTop:"@",showPrevNext:"@",useSimplePrevNext:"@",paginationAction:"&",ulClass:"=?"},template:'<ul ng-hide="Hide" ng-class="ulClass"> '+"<li "+'ng-class="Item.liClass" '+'ng-click="Item.action()" '+'ng-repeat="Item in List"> '+"<a href> "+'<span ng-bind-html="Item.value"></span> '+"</a>"+"</ul>",link:function(e,i,t){e.$watchCollection("[page, total, pageSize]",function(){u(e,t)})}}}]);e.module("ui.materialize.modal",[]).directive("modal",["$compile","$timeout",function(t,n){return{scope:{dismissible:"=",opacity:"@",inDuration:"@",outDuration:"@",ready:"&?",complete:"&?",open:"=?",enableTabs:"@?"},link:function(a,o,r){n(function(){var n=$(r.href?r.href:"#"+r.target);t(o.contents())(a);var l=function(){e.isFunction(a.complete)&&a.$eval(a.complete());a.open=false;a.$apply()};var s=function(){e.isFunction(a.ready)&&a.$eval(a.ready());if(a.enableTabs){n.find("ul.tabs").tabs()}};var u={dismissible:e.isDefined(a.dismissible)?a.dismissible:i,opacity:e.isDefined(a.opacity)?a.opacity:i,in_duration:e.isDefined(a.inDuration)?a.inDuration:i,out_duration:e.isDefined(a.outDuration)?a.outDuration:i,ready:s,complete:l};o.leanModal(u);if(e.isDefined(r.open)&&n.length>0){a.$watch("open",function(i,t){if(!e.isDefined(i)){return}i===true?n.openModal(u):n.closeModal()})}})}}}]);e.module("ui.materialize.tooltipped",[]).directive("tooltipped",["$compile","$timeout",function(e,i){return{restrict:"EA",scope:true,link:function(t,n,a){n.addClass("tooltipped");e(n.contents())(t);i(function(){n.tooltip()});t.$on("$destroy",function(){n.tooltip("remove")})}}}]);e.module("ui.materialize.materialboxed",[]).directive("materialboxed",["$timeout",function(e){return{restrict:"A",link:function(i,t,n){e(function(){t.materialbox()})}}}]);e.module("ui.materialize.nouislider",[]).directive("nouislider",["$timeout",function(t){return{restrict:"A",scope:{ngModel:"=",min:"@",max:"@",step:"@?",connect:"@?",tooltips:"@?"},link:function(n,a,o){t(function(){noUiSlider.create(a[0],{start:n.ngModel||0,step:parseFloat(n.step||1),tooltips:e.isDefined(n.connect)?n.tooltips:i,connect:e.isDefined(n.connect)?n.connect:"lower",range:{min:parseFloat(n.min||0),max:parseFloat(n.max||100)},format:{to:function(e){return Math.round(e*100)/100},from:function(e){return Number(e)}}});a[0].noUiSlider.on("update",function(e,i){n.ngModel=parseInt(e[0],10);n.$apply()})})}}}])})(angular);

2 个答案:

答案 0 :(得分:0)

你应该首先解析JSON:

$http.get('index.php/administration/UsersAdminController/getAllDepartments')
    .then(function(response) {
        if(response.data.message == "success") {
            $scope.departments = JSON.parse(response.data.data);
        }
    });

使用它来测试ng-options(取自上面的示例输出):

JSON.parse(JSON.stringify([{"id":1,"name":"Computación","description":"Departamento","positions":[
                                                                             {"id":1,"name":"Estudiante","description":"Yo soy un estudiante"},                  
                                                                             {"id":2,"name":"Profesor","description":"Educador"}]},
{"id":2,"name":"Quimica","description":"Departamento de quimica","positions":[
                                                                                    {"id":3,"name":"Quimico","description":"Soy un quimico"},
                                                                                    {"id":4,"name":"Farmaco","description":"Farmaco del dpto de quimica"}]}]))

这告诉我你服务器响应的JSON对象格式不正确。

Here是一个工作小提琴

答案 1 :(得分:0)

由于您解决了来自API错误的数据问题,现在您遇到了未在视图中显示的项目的问题,所以我们开始:

首先,您的HTML中存在一些错误,我已对其进行了更正,您可以查看以下内容:

  1. 您没有正确设置value名称:

    <select ng-model="newDepartment" ng-options="key as value for (key , valu) in departments"></select>

  2. 它也应该是:key as value.name* instead of键作为值`;

    1. departmet应为部门

      <select ng-model="ciudadElegida" ng-options="departmet as department.name for department in departments"></select>

    2. &#13;
      &#13;
      (function() {
        "use strict";
        angular.module('app', [])
          .controller('mainCtrl', function($scope) {
            $scope.departments = [  
               {  
                  "id":1,
                  "name":"Computación",
                  "description":"Departamento",
                  "positions":[  
                     {  
                        "id":1,
                        "name":"Estudiante",
                        "description":"Yo soy un estudiante"
                     },
                     {  
                        "id":2,
                        "name":"Profesor",
                        "description":"Educador"
                     }
                  ]
               },
               {  
                  "id":2,
                  "name":"Quimica",
                  "description":"Departamento de quimica",
                  "positions":[  
                     {  
                        "id":3,
                        "name":"Quimico",
                        "description":"Soy un quimico"
                     },
                     {  
                        "id":4,
                        "name":"Farmaco",
                        "description":"Farmaco del dpto de quimica"
                     }
                  ]
               }
            ];
          });
      })();
      &#13;
      <html ng-app="app">
      
      <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
      </head>
      
      <body ng-controller="mainCtrl">
        <span>ngOptions with (key, value): </span><select ng-model="newDepartment" ng-options="key as value.name for (key, value) in departments">
          <option value="">Select department</option>
        </select>
        <hr>
        <span>ngOptions without (key, value): </span><select ng-model="ciudadElegida" ng-options="department as department.name for department in departments">
          <option value="">Select department</option>
        </select>
        <hr>
        ngRepeat of Departments: <div ng-repeat="values in departments" ng-bind="values.name"></div>
      </body>
      
      </html>
      &#13;
      &#13;
      &#13;