retrieving data from multi value datatype in umbraco

Question

Im using Umbraco 7.13.1

I have created a custom data type and that is working well. But now I need to render the data into my template for the page.

The app_pluggin

js file

angular.module('umbraco').controller('IBD_HeaderController', function ($scope) {

    $scope.model.value.Tag = $scope.model.value.Tag || "default value";
    $scope.model.value.HeadingText = $scope.model.value.HeadingText || "default value";

    console.log($scope.model);

    $scope.SetTag = function () {
        $scope.model.value.Tag = $scope.value.Tag
    };
});

html file

<div class="IBD_CMS" ng-controller="IBD_HeaderController">
    <div>
        <input class="headingTextBox" type="text" ng-model="model.value.HeadingText" ng-change="SetHeading()">
    </div>
    <div class="HeadingTag">
        <label class="TagOption">
            <input type="radio" name="HeadingTag" value="h1" ng-model="model.value.Tag" ng-click="SetTag()">
            <span>H1</span>
        </label>
        <label class="TagOption">
            <input type="radio" name="HeadingTag" value="h2" ng-model="model.value.Tag" ng-click="SetTag()">
            <span>H2</span>
        </label>
        <label class="TagOption">
            <input type="radio" name="HeadingTag" value="h3" ng-model="model.value.Tag" ng-click="SetTag()">
            <span>H3</span>
        </label>
        <label class="TagOption">
            <input type="radio" name="HeadingTag" value="h4" ng-model="model.value.Tag" ng-click="SetTag()">
            <span>H4</span>
        </label>
        <label class="TagOption">
            <input type="radio" name="HeadingTag" value="h5" ng-model="model.value.Tag" ng-click="SetTag()">
            <span>H5</span>
        </label>
        <label class="TagOption">
            <input type="radio" name="HeadingTag" value="h6" ng-model="model.value.Tag" ng-click="SetTag()">
            <span>H6</span>
        </label>
    </div>
</div>

manifest

{
  propertyEditors:[
    {
      alias: "IBD.Heading",
      name: "Intelligence By Design Heading",
      editor: {
        view: "~/App_Plugins/IBD.Heading/IBD.Heading.View.html",
        valueType: "JSON"
      }
    }
  ],
  javascript: [
    "~/App_Plugins/IBD.Heading/IBD.Heading.js"
  ],
  css: [
    "~/App_Plugins/IBD.Heading/style.css"
  ]
}

I can set the information in content editor and it is all stored.

My issue is how do I get it back into the cshtml file as 2 seperate values

ie Model.content.ComponentName.HeadingText Model.content.ComponentName.Tag

I have currently got

pageHeading = Model.Content.GetPropertyValue<string>("cartName");

this returns

{ "TAG": "H3", "HEADINGTEXT": "MY CART" }

i want this

pageHeading = My Cart pageHeadingTag = h3

Answer 1

Thanks eyescream solved it last night created a model and controller then called the function which deserializes the string into the model to be returned back to the cshtml file. Yours looks a lot easier but I want to add more variables to the pluggin done the track so I think mine will do the job long term as well