<![CDATA[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>
]]>https://forum.mango-os.com/topic/2546/json-ng-init-passing-data-to-directiveRSS for NodeSun, 13 Sep 2026 17:19:00 GMTWed, 16 Nov 2016 09:06:26 GMT60<![CDATA[Reply to json/ ng-init passing data to directive. on Wed, 16 Nov 2016 20:26:18 GMT]]>@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>
]]>https://forum.mango-os.com/post/13274https://forum.mango-os.com/post/13274Wed, 16 Nov 2016 20:26:18 GMT<![CDATA[Reply to json/ ng-init passing data to directive. on Wed, 16 Nov 2016 17:07:54 GMT]]>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>

]]>https://forum.mango-os.com/post/13263https://forum.mango-os.com/post/13263Wed, 16 Nov 2016 17:07:54 GMT<![CDATA[Reply to json/ ng-init passing data to directive. on Wed, 16 Nov 2016 16:31:41 GMT]]>@atkins-chrisw You have the syntax for ma-point-query correct on the first line, please take a look at the API documentation.

As for the md-select you 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

]]>https://forum.mango-os.com/post/13261https://forum.mango-os.com/post/13261Wed, 16 Nov 2016 16:31:41 GMT