one custom property but with 2 fields - Extending Umbraco

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Sebastian Dammark 583 posts 1407 karma points

Mar 09, 2015 @ 21:41

One custom property, but with 2 fields

I'm trying to do something like this:

But whenever I try to set a value in the second dropdown I get the following error:

Attempted to assign to readonly property.

My markup looks like this

<div ng-controller="Rating">
    <select ng-model="model.value" name="rating" id="rating" ng-options="c.id as c.value for c in ratings"></select> of
    <select ng-model="model.value.limit" name="rating-limit" id="rating-limit" ng-options="c.id as c.value for c in ratings"></select>
</div>

What is it I'm doing wrong ?

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Mar 09, 2015 @ 21:47

0

Hi Sebastian

Do you mind sharing the controller as well? Is it an error shown in the console log?

/Jan

Copy Link

Sebastian Dammark 583 posts 1407 karma points

Mar 09, 2015 @ 21:54

Here is the controller

angular.module("umbraco").controller("Rating", function ($scope) {
    $scope.ratings = [ 
        {id: '0', value: '0' },
        {id: '1', value: '1' },
        {id: '2', value: '2' },
        {id: '3', value: '3' },
        {id: '4', value: '4' },
        {id: '5', value: '5' }
    ]
});

Yes, the error appears in the console log.

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Mar 09, 2015 @ 22:19

0

Hi Sebastian

Ok, I think it's because you're trying to use $scope.model.value.limit - Limit does not exists and needs to be declared in the controller I think.

You should probably consider storing the values as an object in $scope.model.value like $scope.model.value = {rating:null, limit:null}

What is the purpose of your property editor? What is the purpose of the limit?

/Jan

Copy Link
Sebastian Dammark 583 posts 1407 karma points

Mar 09, 2015 @ 22:52

0

This is the idea. Let's say you have a website with products that gets reviewed atround the web.

You never know what the scale goes to, so this part has to flexible

Copy Link
Sebastian Dammark 583 posts 1407 karma points

Mar 10, 2015 @ 00:08

0

Hmmm ... it doesn't save.

You can see the entire property here:

https://gist.github.com/f74ea70100241f9eb16f

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Mar 10, 2015 @ 05:30

Hi Sebastian

You'll need to set it like $scope.model.value = {rating:null. limit:null}

So for instance your controller can look like this

angular.module("umbraco").controller("Rating", function ($scope) {
    $scope.ratings = [ 
        {id: '0', value: '0' },
        {id: '1', value: '1' },
        {id: '2', value: '2' },
        {id: '3', value: '3' },
        {id: '4', value: '4' },
        {id: '5', value: '5' }
    ];

       if(!$scope.model.value){
           $scope.model.value = {rating:null, limit:null};       
       }

       $scope.saveRating = function(){
             $scope.model.value.rating = this.ratingValue;
        }

       $scope.saveLimit = function(){
             $scope.model.value.limit = this.limitValue;
        }

});

Then your view could look like this

<div ng-controller="Rating">
    <select ng-model="ratingValue" name="rating" id="rating" ng-options="c.id as c.value for c in ratings" ng-change="saveRating()"></select> of
    <select ng-model="limitValue" name="rating-limit" id="rating-limit" ng-options="c.id as c.value for c in ratings" ng-change="saveLimit()"></select>
</div>

Hope this helps and makes sense.

/Jan

Copy Link

Sebastian Dammark 583 posts 1407 karma points

Mar 10, 2015 @ 13:42

0

Absolutely .. it works like a charm.

This is what I ended up with:

https://gist.github.com/f74ea70100241f9eb16f

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Mar 10, 2015 @ 13:50

0

Hi Sebastian

Happy that I could help - Ehm, but the second links seems to be to the same code that you initially had issues with? :)

/Jan

Copy Link
Sebastian Dammark 583 posts 1407 karma points

Mar 10, 2015 @ 14:55

0

Yeah, almost.

The binding is different

ng-model="model.value.rating" / ng-model="model.rating.value"

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Mar 10, 2015 @ 15:04

0

Hi Sebastian

Aaah yes of course - I'm going blind :)

/Jan

Copy Link
is working on a reply...

Please Sign in or register to post replies