Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
json/ ng-init passing data to directive.
-
I am getting a parser error when I try to run this page.
What I am trying to do is run a ma-point-query on a specific device that I have listed either in a json object or in the ng-init. I have it in the ng-init for this code. But I would like to have it as part of a JSON object.
Am I using the {{brackets}} wrong? I've tried everything I could think of.
Also lines 142 - 148 was an attempt to force the name into a md-select and its options. This didn't work either. I would like to figure out how to do this as wel, so I can have in my JSON object the list of the device names and it would create the cropdown box for me.
<!-- @copyright 2016 {@link http://proxyem.com|PROXYEM LLC.} All rights reserved. @author Christopher Atkins --> <!DOCTYPE html> <html lang="en"> <!-- USER INPUT SECTION --> <!--vvvvvvvvvvvvvvvvvvvvvv--> <!-- Instructions: 1)--> <!-- BUILDING NAME and assign it to an output variable "bldgName" --> <div ng-app="" ng-init=" building= 'admiss'; campus= 'mountainside'; location= 'admiss'; home= 'home'; powerDevice= '032 POWER East'; heatingDevice= '032 GAS East'; coolingDevice= 'CW Meter'; "> <!--^^^^^^^^^^^^^^^^^^^^^^^^--> <!-- USER INPUT SECTION --> <!-- NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY --> <!-- NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY --> <!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv--> <!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv--> <!-- SERVER SIDE QUERIES SECTION --> <!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv--> <!-- Server side query for points with given device name, and server side sort --> <ma-point-query query="{deviceName:deviceName}" sort="'name'" points="powerPoints"></ma-point-query> <ma-point-query query="{{heatingDevice}}" sort="'name'" points="heatingPoints"></ma-point-query> <ma-point-query query="{{coolingDevice}" sort="'name'" points="coolingPoints"></ma-point-query> <ma-point-query query="{{waterDevice}}" sort="'name'" points="waterPoints"></ma-point-query> <ma-point-query query="{{renewDevice}}" sort="'name'" points="renewPoints"></ma-point-query> <ma-point-query query="{{weather}}" sort="'name'" points="weatherPoints"></ma-point-query> <ma-get-point-value points="powerPoints" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes"></ma-get-point-value> <!-- POWER DATA Client side filter by name --> <ma-calc input="powerPoints | filter:{name:'KW'} | first" output="kW"></ma-calc> <ma-calc input="powerPoints | filter:{name:'KW Peak'} | first" output="kWPeak"></ma-calc> <ma-calc input="powerPoints | filter:{name:'KWH 15 Delta'} | first" output="kWh15Delta"></ma-calc> <ma-calc input="powerPoints | filter:{name:'KWH MTD Delta'} | first" output="kWhMtdDelta"></ma-calc> <ma-calc input="powerPoints | filter:{name:'PF'} | first" output="powerFactor"></ma-calc> <ma-calc input="powerPoints | filter:{name:'PF MIN'} | first" output="powerFactorMin"></ma-calc> <ma-point-values point="kW" values="kWValues" latest="1"></ma-point-values> <ma-point-values point="kWPeak" values="kWPeakValues" latest="1"></ma-point-values> <ma-point-values point="kWh15Delta" values="kWh15DeltaValues" latest="1"></ma-point-values> <ma-point-values point="kWhMtdDelta" values="kWhMtdValues" latest="1"></ma-point-values> <ma-point-values point="powerFactor" values="pfValues" latest="1"></ma-point-values> <ma-point-values point="powerFactorMin" values="pfMinValues" latest="1"></ma-point-values> <!-- HEATING DATA Client side filter by name --> <!-- <ma-calc input="waterPoints | filter:{name:'Volume Rate'} | first" output="vRate"></ma-calc> <ma-calc input="waterPoints | filter:{name:'Volume Total'} | first" output="vTotal"></ma-calc> --> <!-- COOLING DATA Client side filter by name --> <!-- <ma-calc input="waterPoints | filter:{name:'Volume Rate'} | first" output="vRate"></ma-calc> <ma-calc input="waterPoints | filter:{name:'Volume Total'} | first" output="vTotal"></ma-calc> --> <!-- WATER DATA Client side filter by name --> <!-- <ma-calc input="waterPoints | filter:{name:'Volume Rate'} | first" output="vRate"></ma-calc> <ma-calc input="waterPoints | filter:{name:'Volume Total'} | first" output="vTotal"></ma-calc> --> <!-- WEATHER DATA Client side filter by name --> <!-- <ma-calc input="device1points | filter:{name:'Volume Rate'} | first" output="vRate"></ma-calc> <ma-calc input="device1points | filter:{name:'Volume Total'} | first" output="vTotal"></ma-calc> <ma-point-statistics point="vTotal" from="from" to="to" statistics="statsObj"></ma-point-statistics> <ma-point-values point="vRate" values="vRateValues" latest="1"></ma-point-values> <ma-point-values point="vTotal" values="vTotalValues" latest="1"></ma-point-values> <ma-point-values point="vTotal" values="rateValues" from="from" to="to" rollup="DELTA" rollup-interval="1 minutes" limit="1000"></ma-point-values> <ma-point-values point="Rate" values="point5Values" latest="1"></ma-point-values> --> </div> <!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^--> <!-- SERVER SIDE SERVER QUERIES SECTION --> <!-- HTML --> <!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv--> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/resources/angular-csp.css"></link> <link rel="stylesheet" href="../../../../vendor/angular-material/angular-material.css"> <link rel="stylesheet" href="../../../../vendor/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="../../../../vendor/mdPickers/mdPickers.css"> <link rel ="stylesheet" ng-href="/modules/dashboards/web/beta/styles/vitality.css"> <get-json url="/modules/dashboards/web/beta/json/buildingPageData.json" output="buildingPageData"></get-json> <!-- <pre ng-bind="buildingPageData|json"></pre> --> <get-json url="/modules/dashboards/web/beta/json/{{building}}.json" output="buildingData"></get-json> <!-- <pre ng-bind="buildingData|json"></pre> --> </head> <body layout="column"> <div ng-if="appLoading"> <span>App is loading..</span> </div> <div ng-cloak layout="column" flex layout-fill> <!-- Your content here --> <div ng-hide> <md-select ng-model="deviceName" ng-init=""> <md-option ng-value="{powerDevice}"></md-option> </md-select> </div> <div> <div flex="initial" layout="row" layout-wrap layout-align="end center"> <md-card-actions flex="initial" layout="row" layout-wrap> <a ui-sref="dashboard.{{home}}"><md-button class="vitality-button">Home</md-button></a> <a ui-sref="dashboard.{{campus}}.{{location}}_p"><md-button class="vitality-button">Power</md-button></a> <a ui-sref="dashboard.{{campus}}.{{location}}_h"><md-button class= "vitality-button">Heating</md-button></a> <a ui-sref="dashboard.{{campus}}.{{location}}_c"><md-button class= "vitality-button">Cooling</md-button></a> <a ui-sref="dashboard.{{campus}}.{{location}}_w"><md-button class= "vitality-button">Water</md-button></a> </md-card-actions> </div> <div flex layout="row" layout-align="space-between" layout-padding layout-fill layout-wrap> <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor" > <!-- DEMAND CARD --> <div layout="column"> <md-card-content> <div flex layout="row" layout-align="center"> <h2 class="home-card">{{buildingPageData.header1}}</h2> </div> <div flex layout="row" flex="100"> <div layout="column" layout-align="center end" flex="30" hide-xs hide-sm> <img src={{buildingPageData.imageFile}}{{buildingPageData.demandImage}} ma-tr={{buildingPageData.demandmatr}} alt="test" class="icon-size" > </div> <div layout="column" layout-align="space-around start" flex="70" flex-sm="100" flex-xs="100"> <h2 class="home-labels">{{buildingPageData.label1}} <span style="color:#ffffff;"><ma-point-value point="kW"></ma-point-value></span><br>{{buildingPageData.label2}} <span style="color:#ffffff;"><ma-point-value point="kWPeak"></ma-point-value></span></h2> </div> </div> <div flex layout="row" layout-align="center"> <P class="home-disclaimer">{{buildingPageData.disclaimer1}}</P> </div> </md-card-content> </div> </md-card> <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor" > <!--MONTHLY ENERGY USE CARD --> <div layout="column"> <md-card-content> <div flex layout="row" layout-align="center"> <h2 class="home-card">{{buildingPageData.header2}}</h2> </div> <div flex layout="row" flex="100"> <div layout="column" layout-align="center end" flex="30" hide-xs hide-sm> <img src={{buildingPageData.imageFile}}{{buildingPageData.monthlyEnergyImage}} ma-tr={{buildingPageData.monthlyEnergymatr}} alt="test" class="icon-size" > </div> <div layout="column" layout-align="space-around start" flex="70" flex-sm="100" flex-xs="100"> <h2 class="home-labels">{{buildingPageData.label3}} <span style="color:#ffffff;"><ma-point-value point="kWh15Delta"></ma-point-value></span><br>{{buildingPageData.label4}} <span style="color:#ffffff;"><ma-point-value point="kWhMtdDelta"></ma-point-value></span></h2> </div> </div> <div flex layout="row" layout-align="center"> <P class="home-disclaimer">{{buildingPageData.disclaimer2}}</P> </div> </md-card-content> </div> </md-card> <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor" > <!-- POWER QUALITY CARD --> <div layout="column"> <md-card-content> <div flex layout="row" layout-align="center"> <h2 class="home-card">{{buildingPageData.header3}}</h2> </div> <div flex layout="row" flex="100"> <div layout="column" layout-align="center end" flex="30" hide-xs hide-sm> <img src={{buildingPageData.imageFile}}{{buildingPageData.qualityImage}} ma-tr={{buildingPageData.qualitymatr}} alt="test" class="icon-size" > </div> <div layout="column" layout-align="space-around start" flex="70" flex-sm="100" flex-xs="100"> <h2 class="home-labels">{{buildingPageData.label5}} <span style="color:#ffffff;"><ma-point-value point="powerFactor"></ma-point-value></span><br>{{buildingPageData.label6}} <span style="color:#ffffff;"><ma-point-value point="powerFactorMin"></ma-point-value></span></h2> </div> </div> <div flex layout="row" layout-align="center"> <P class="home-disclaimer">{{buildingPageData.disclaimer3}}</P> </div> </md-card-content> </div> </md-card> <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor" > <!-- WEATHER CARD --> <div layout="column"> <md-card-content> <div flex layout="row" layout-align="center"> <h2 class="home-card">{{buildingPageData.header4}}</h2> </div> <div flex layout="row" flex="100"> <div layout="column" layout-align="center end" flex="30" hide-xs hide-sm> <img src={{buildingPageData.imageFile}}{{buildingPageData.weatherImage}} ma-tr={{weathermatr}} alt="test" class="icon-size" > </div> <div layout="column" layout-align="space-around start" flex="70" flex-sm="100" flex-xs="100"> <h2 class="home-labels">{{buildingPageData.label7}} <span style="color:#ffffff;"><ma-point-value point-xid={{buildingData.bldgTempPnt}}></ma-point-value></span><br>{{buildingPageData.label8}} <span style="color:#ffffff;"><ma-point-value point-xid={{buildingData.bldgCondPnt}}></ma-point-value></span></h2> </div> </div> <div flex layout="row" layout-align="center"> <P class="home-disclaimer">{{buildingPageData.disclaimer1}}</P> </div> </md-card-content> </div> </md-card> <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor" hide-xs hide-sm> <!-- BUILDING CARD --> <div layout="column"> <md-card-content> <div flex layout="row" layout-align="center"> <h2 class="home-card">{{buildingData.bldgName}}</h2> </div> <div flex layout="column" layout-align="center center" > <div flex> <img src={{buildingPageData.custImageFile}}{{buildingData.bldgImage}} ma-tr={{buildingData.bldgAcro}} alt="test" class="building-image" > </div> </div> </md-card-content> </div> </md-card> <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor"> <!-- BTU CARD --> <div layout="column"> <md-card-content> <div flex layout="row" layout-align="center"> <h2 class="home-card">{{buildingPageData.header5}}</h2> </div> <div flex layout="row" flex="100"> <div layout="column" layout-align="center end" flex="30" hide-xs hide-sm> <img src={{buildingPageData.imageFile}}{{buildingPageData.btuImage}} ma-tr={{buildingPageData.btumatr}} alt="test" class="icon-size" > </div> <div layout="column" layout-align="space-around start" flex="70" flex-sm="100" flex-xs="100"> <h2 class="home-labels">{{buildingPageData.label9}} <span style="color:#ffffff;"><ma-point-value point-xid={{buildingData.bldgChwBtuPnt}}></ma-point-value></span><br>{{buildingPageData.label10}} <span style="color:#ffffff;"><ma-point-value point-xid={{buildingData.bldgHtwBtuPnt}}></ma-point-value></span></h2> </div> </div> <div flex layout="row" layout-align="center"> <P class="home-disclaimer">{{buildingPageData.disclaimer2}}</P> </div> </md-card-content> </div> </md-card> </div> </div> </div> </body> </html> -
@atkins-chrisw You have the syntax for
ma-point-querycorrect on the first line, please take a look at the API documentation.As for the
md-selectyou almost have it correct, just remove the braces.I think you are getting confused about interpolation using double curly braces i.e.
{{someVariable}}and passing objects through to a directive as an expression i.e.my-attr="{property: value}"Please read this for a quick explaination - http://www.w3schools.com/angular/angular_expressions.asp
Also these may be helpful -
https://docs.angularjs.org/guide/interpolation
https://docs.angularjs.org/guide/expression -
Thanks Jared. That worked. But the problem now is that the values are incorrect. And on one of them, it shows it as disabled.
If I use a standard drop down box with the device name as the input. I get the right values. Im trying to not have to hand enter each list selector.
Is it not possible to make the json object go directly into the ma-point-query.
so instead of : <ma-point-query query="{deviceName:deviceName}" sort="'name'" points="powerPoints"></ma-point-query>
its more like : <ma-point-query query="{deviceName:{powerDevice}}" sort="'name'" points="powerPoints"></ma-point-query>
-
@atkins.chrisw said in json/ ng-init passing data to directive.:
Thanks Jared. That worked. But the problem now is that the values are incorrect. And on one of them, it shows it as disabled.
If I use a standard drop down box with the device name as the input. I get the right values. Im trying to not have to hand enter each list selector.
I'm really not following what worked and what didn't.
Is it not possible to make the json object go directly into the ma-point-query.
It definitely is.
so instead of : <ma-point-query query="{deviceName:deviceName}" sort="'name'" points="powerPoints"></ma-point-query>
its more like : <ma-point-query query="{deviceName:{powerDevice}}" sort="'name'" points="powerPoints"></ma-point-query>
The first syntax is correct. Assuming you have a variable named deviceName on your scope. The second syntax is entirely incorrect. Do you want this maybe?
<ma-point-query query="{deviceName:powerDevice}" sort="'name'" points="powerPoints"></ma-point-query>
