亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

angular.js - Angular 的指令作用域 結(jié)合 下拉篩選框
巴扎黑
巴扎黑 2017-05-15 17:02:18
0
3
745

請(qǐng)教大神兩個(gè)問題
1、有關(guān)于ng-option中選取json的下拉項(xiàng),讓select下拉框的選項(xiàng)是grade.json中的每一組的cname。我寫的“a.cname for a in gradejson”無法讓下拉框每列顯示cname
html中的select如下:

 <select ng-model="seleted" 
             ng-options="a.cname for a in gradejson">
                <option value="">請(qǐng)選擇科目</option>              
             </select>

對(duì)應(yīng)的controller如下:

 function($rootScope,$location,$scope,$http) {      
         $http.get("grade.json")
         .success(function(data){         
        $scope.gradejson=data; 
        $scope.salesData=gradejson.salesData; 
        $scope.seleted='';
        });

grade.json如下:

[
  {          
            "cname": "總成績(jī)",
             "score": "490",
             "salesData":[                
           {"scoredomain":80,"student_name": 80,"subject_scores": 16,"subject_scores2":14},
           {"scoredomain":85,"student_name": 85,"subject_scores": 25,"subject_scores2":10}
           ]
            },
            {
                "cname": "計(jì)算機(jī)網(wǎng)絡(luò)",
                "score": "90",
                "salesData":[                   
           {"scoredomain":90,"student_name": 90,"subject_scores": 24,"subject_scores2":7},
           {"scoredomain":95,"student_name": 95,"subject_scores": 5,"subject_scores2":1}
           ]
    }
]

下圖的下拉框是現(xiàn)在無法顯示每列cname的狀況。。

2、請(qǐng)大神們看第二個(gè)問題啊,略難,困擾好幾天了。
在上個(gè)圖里是無法顯示directive畫的圖的情況(應(yīng)該是作用域的問題)
每次選擇一個(gè)cname,圖中的數(shù)據(jù)變?yōu)閏name同組的salesData畫的圖,畫圖形的指令在directive中的指令畫的??墒侵噶钭饔糜虿恢廊绾螌懗鰜?。。
html中的如下:

<p linear-chart chart-data={{seleted.salesData}} ></p>
 <h4>{{seleted.cname}}的成績(jī)?yōu)閧{seleted.score}}</h4>

directive.js 的指令如下:

angular.module('myApp.directives',[])
         .directive('linearChart',function($window){
     return {
         restrict:'EA',
         template:"<svg width='350' height='350'></svg>",
         scope:{
      chartData:'=chartData'
    },
         link: function(scope, elem, attrs){
        scope.$watch('chartData',function(newData,oldData){
             if(!newData) return ;
             drawLineChart(newData);
          });       
           var salesDataToPlot=scope[attrs.chartData];           
           console.log(salesDataToPlot);
           var rawSvg=elem.find('svg');
           var svg = d3.select(rawSvg[0]);
           function setChartParameters(){
               xScale = d3.scale.linear()
                   .domain([salesDataToPlot[0].scoredomain, 
                    salesDataToPlot[salesDataToPlot.length-1].scoredomain])
                   .range([padding + 5, rawSvg.attr("width") - padding]);
               yScale = d3.scale.linear()
                   .domain([0, d3.max(salesDataToPlot, function (d) {
                       return d.subject_scores;
                   })])
                   。。。

報(bào)錯(cuò)如下:

請(qǐng)大神賜予我力量吧?。∥业拿枋鍪欠翊笊衲芸炊??不懂請(qǐng)使勁戳我。

巴扎黑
巴扎黑

Antworte allen(3)
PHPzhong

關(guān)于第一個(gè)問題,可以看看這里,或許對(duì)你有幫助。

給我你的懷抱

第一個(gè)問題,你的代碼沒有問題啊,demo在這里plunker

大家講道理

html 應(yīng)該這么寫:
<select ng-model="seleted" ng-options="a.cname for a in gradejson" >
<option value="">請(qǐng)選擇科目</option>
</select>
控制器應(yīng)該這么寫:
$scope.seleted='';
$http.get("grade.json")
.success(function(data){
$scope.gradejson=data;});
.error(function(data){});

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage