Data is not saved if use custom property editor in Umbraco

Question

I create custom property editor which takes all available languages in Umbraco like:

angular.module("umbraco").controller("MyLanguageController", function ($scope, myLanguageService) {
   $scope.items = [];

   myLanguageService.getAll().then( function( result ) {
      if( result && result.data && result.data.length ) {
         $scope.items = result.data;
      }
   } );
});

and

angular.module("umbraco.resources")
   .factory("myLanguageService", function ($http) {

      return {
         getAll: function () {
            return $http.get("/umbraco/backoffice/MyControllerSide/GetAll", { "dataType": "json" });
         }
      };
});

The view:

<div ng-controller="MyLanguageController" id="language">
   <ul>
      <li ng-repeat="item in items" class="checkbox">
         <label>
            <input type="checkbox" value="{{item.IsoCode}}"> {{item.CultureName}}
         </label>
      </li>
   </ul>
</div>

The package manifest contains:

{
    propertyEditors: [
        {
            alias: "MyLanguageAlias",
            name: "Language Selector",
            icon: "icon-umb-translation",
            hideLabel: true,
            valueType: "JSON",
            editor: {
                view: "~/App_Plugins/MyLanguageSelector/backoffice/view.html"
            }
        }
    ],
  ...

and C# code:

  [HttpGet]
  public JsonResult GetAll()
  {
     IEnumerable<ILanguage> languages = ApplicationContext.Services.LocalizationService.GetAllLanguages() ?? new List<ILanguage>(0);
     IEnumerable<TranslationLanguageModel> model =
        languages.Select(s => new MyLanguageModel { CultureName = s.CultureInfo.DisplayName, IsoCode = s.IsoCode });

     return Json(model, JsonRequestBehavior.AllowGet);
  }

I created new data type in Umbraco/Developer section, and I add it in document type:

When I save document, the value for that property is null. I don't understand why.

And when come back to content, then nothing is checked.

What should I do ?

Update 1

If I put:

<input type="checkbox" value="{{item.IsoCode}}"  ng-model="models[item.IsoCode]"/> {{item.CultureName}}

then I receive always True instead of object/json.

Update 2

I succeeded to do by adding ng-change for checkbox and modify $scope.model.value value

<input type="checkbox" value="item.IsoCode" ng-change="change()" ng-model="models[item.IsoCode]"/> {{item.CultureName}}

and

$scope.models = {};

$scope.change = function () {
  $scope.model.value = $scope.models;
}

then it works !

Jannik Anker Jannik Anker · Accepted Answer · 2017-06-07T07:09:40

Your checkboxes have no model to save their state to, so Umbraco has nothing to save. Try adding ng-model="model.value" (or something thereabout) to your checkbox and see if that does something more :-)

Data is not saved if use custom property editor in Umbraco

1 Answers