Copied to clipboard

Flag this post as spam?

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


  • David Brendel 750 posts 2817 karma points c-trib
    Dec 15, 2013 @ 23:40
    David Brendel
    0

    PropertyEditor for Select Input Field

    For my current project i'm trying to build a property editor that builds a select box with values from a controller.

    For the select box i try using angular's ng-repeat and ng-selected to render the options and setting the selected attribute.

    View:

    <div ng-controller="EventCalendar.CalendarEditorController">
        <select ng-model="selected_cal" id="calendar_picker" class="umb-editor umb-dropdown" required>
            <option ng-repeat="c in calendars" value="{{c.id}}" ng-selected="model.value == c.id">{{c.calendarname}}</option>
        </select>
    </div>

    Controller:

    angular.module("umbraco").controller("EventCalendar.CalendarEditorController",
            function ($scope, $routeParams, calendarResource, notificationsService, assetsService) {
                //Load all calendar
                calendarResource.getall().then(function (response) {
                    $scope.calendars = response.data;
                }, function (response) {
                    notificationsService.error("Error", "Could not load calendar");
                });
                $scope.$watch('selected_cal', function () {
                    $scope.model.value = $scope.selected_cal;
                    console.log($scope.selected_cal);
                });
            });

    Sadly the ng-selected does not work. Any hints on this?

  • Marc Goodson 995 posts 6568 karma points MVP 4x c-trib
    Dec 16, 2013 @ 02:20
    Marc Goodson
    1

    In the view: I think you can just use a ng-options attribute in the select tag for this ? eg:

    <select ng-model="model.value" ng-options="c.id as c.calendarname for c in calendars"></select>

    and you don't then need the option bit, having ng-model set to 'model.value' should bind the selected value of the dropdown to the value of the control. 

    I got something similar working here; http://www.tooorangey.co.uk/posts/u-css-class-name-dropdown-property-editor-for-umbraco-7/

    the docs for ng-options are here: http://docs.angularjs.org/api/ng.directive:select and you can see the 'comprehensive_expression' for the ng-options setting varies depending on the source, (whether it's an object or an array)

     

  • David Brendel 750 posts 2817 karma points c-trib
    Dec 16, 2013 @ 19:48
    David Brendel
    0

    Tryied the ng-options directive, but the option tag doesn't get selected after the page has loaded.

    Controller:

    angular.module("umbraco").controller("EventCalendar.CalendarEditorController",
            function ($scope, $routeParams, calendarResource, notificationsService, assetsService) {
    
                $scope.calendars = [];
    
                //Load all calendar
                calendarResource.getall().then(function (response) {
                    $scope.calendars = response.data;
                }, function (response) {
                    notificationsService.error("Error", "Could not load calendar");
                });
    
            });
    

    View:

    <div ng-controller="EventCalendar.CalendarEditorController">
        <select ng-model="model.value" id="calendar_picker" class="umb-editor umb-dropdown" ng-selected="c.id == model.value" ng-options="c.id as c.calendarname for c in calendars" required></select>
        <p>{{model.value | json}}</p>
    </div>
    
  • Marc Goodson 995 posts 6568 karma points MVP 4x c-trib
    Dec 16, 2013 @ 23:45
    Marc Goodson
    0

    I am guessing slightly, but I don't think you need the ng-selected="c.id == model.value" bit

    if you look at the ng-selected docs, http://docs.angularjs.org/api/ng.directive:ngSelected that's for writing out 'selected' on an option element, and I think just binding the ng-model to model.value and using ng-options, should 'just work'

    in mine I have

    <div ng-controller="tooorangey.uCssClassNameDropdownController">
           <select ng-model="model.value" ng-options="ccn for ccn in classnames"></select>

    but I am binding to an array of string values, so my ng-options syntax is different, maybe this makes it different to yours, but when the page loads it selects in the dropdown the value matching the model.value that is saved in umbraco.

     

  • David Brendel 750 posts 2817 karma points c-trib
    Dec 23, 2013 @ 14:29
    David Brendel
    0

    Sadly after hours and hours of try and error i'm at an dead end. Nothing is working.

    Doesn't matter how i write the ng-options part and if i'm using ng-selected or not. The right value get's saved but the select isn't at the selected value.

    Too sad.

  • Marc Goodson 995 posts 6568 karma points MVP 4x c-trib
    Dec 27, 2013 @ 02:07
    Marc Goodson
    0

    Hi David

    I've knocked up a test with a more complex source than the one I got working with uCssClassNameDropdown eg:

    Controller:

     angular.module("umbraco").controller("dropdownpropertytestcontroller", function ($scope, $http) {  
    $scope.calendars = [
    { id: '1', calendarname: 'January' },
    { id: '2', calendarname: 'February' },
    { id: '3', calendarname: 'March' },
    { id: '4', calendarname: 'April' },
    { id: '5', calendarname: 'May' }
    ];
    });

    View:

    <div ng-controller="dropdownpropertytestcontroller"> 
            <select ng-model="model.value" ng-options="c.id as c.calendarname for c in calendars"></select>
    
        <span ng-bind="model.value"></span>

    Manifest:

     { propertyEditors: 
    [ { alias: "DropdownPropertyTest", name: "Dropdown Property Test", valueType: "JSON", editor:
    { view: "~/App_Plugins/DropdownPropertyTest/dropdownpropertytesteditor.html" },
    prevalues: {} } ], parameterEditors:[],
    javascript: [ '~/App_Plugins/DropdownPropertyTest/dropdownpropertytest.controller.js' ],
    css: [] }

    The dropdown works as expected, eg the saved value from the dropdown, causes that option to be selected in the list when the new node is reloaded. I'm wondering whether the datatype for your id in your datasource is an integer? but it's being stored as a string. This stack overflow question explains the angular dropdown binding a bit better: http://stackoverflow.com/questions/13803665/angularjs-value-attribute-for-select

  • David Brendel 750 posts 2817 karma points c-trib
    Jan 06, 2014 @ 16:51
    David Brendel
    100

    Hi Marc,

    sorry for the late reply. In fact you're right. When testing your code it works as expected.

    I've compared youre code with mine and there should be no differences but it's still not working.

    Maybe it's because of the dynamically gathered data for the dropdown.

  • David Brendel 750 posts 2817 karma points c-trib
    Jan 07, 2014 @ 10:49
    David Brendel
    0

    Ok problem solved. The thing i overread was that you use the id's as a string. I'm using them as an int. After parsing them to a string everything works.

    So thanks for your help and patience.

  • Darina Kourilova 3 posts 83 karma points
    Feb 18, 2016 @ 08:17
    Darina Kourilova
    0

    Man, you probably save my live with this post! Thanks a lot. Have same problém and converting option value to string get preselecting work with nq-option.

  • Marc Goodson 995 posts 6568 karma points MVP 4x c-trib
    Jan 07, 2014 @ 21:22
    Marc Goodson
    0

    ace!! glad you got it working.

  • Simon Osborne 108 posts 150 karma points
    Mar 06, 2014 @ 21:14
    Simon Osborne
    0

    I'm facing the same issue. I'm serializing a class using JavaScriptSerializer which produces an Id value without quotes as its an integer. I didn't really want to change it to a string in the class just to get quotes. Is there a way I can get Angular to match the model value and the option value to give me a selected value without having to do modify my class?

  • Simon Osborne 108 posts 150 karma points
    Mar 06, 2014 @ 21:53
    Simon Osborne
    0

    Hang on found an alternative to ng-option using ng-repeat:

        <select ng-model="model.value">
            <option 
                ng-selected="{{c.CurrencyID == model.value}}"
                ng-repeat="c in currencies"
                value="{{c.CurrencyID}}">
                {{c.Name}}
            </option>
        </select>
    
  • Beginner 1 post 21 karma points
    Sep 17, 2014 @ 10:37
    Beginner
    0

    I am new to angularjs , i am trying to set the selected value to a dropdown after a post...(along with other options in the dropdown) but i am not able to...

    Can you please tell me how do I retain the selected value in the dropdown to be selected even after a post method or a page refresh?

  • David Brendel 750 posts 2817 karma points c-trib
    Sep 17, 2014 @ 11:58
    David Brendel
    0

    Can you provide some example how your data and your view is looking?

  • dekian 3 posts 72 karma points
    Apr 08, 2016 @ 17:22
    dekian
    0

    I have been struggling with this same issue for what feels like an eternity now. I am new to angular and umbraco so go easy on me. Currently I am using Umbraco 7.4.1 and can't figure out how to get the "selected" option to stick on reload/refresh. The value def. gets stored.

    I am not sure where to begin troubleshooting it. I have tried everything above with no success.

    Background: I am attempting to pull back some JSON values from Brightcove to create a picker in our document type. I have tried it both with and without the $http.get.

    Here is my HTML

    <div ng-controller="BrightcovePicker">
        <select 
                ng-model="model.value" 
                class="umb-editor umb-dropdown" 
                ng-options="video.HTMLTitle for video in Videos track by video.Id" 
                ng-selected="video.Id == model.value.Id" 
                style="width: 50%;">
        </select>
    
        {{model.value | json}}
    </div>
    

    Controller

    angular.module("umbraco").controller("BrightcovePicker", function ($scope, $http)
    {
        $http.get('/umbraco/api/brightcoveapi/getvideolist').then(function (res)
        {
            $scope.Videos = res.data;
        });
    });
    

    Manifest file:

    {
      //you can define multiple editors
      propertyEditors: 
      [
        {
          alias: "BrightcovePicker",
          name: "Brightcove Video Picker",
          editor: 
          {
            valueType: "JSON",
            view: "~/App_Plugins/BrightcovePicker/brightcovepicker.html?cache=7"
          }, 
          prevalues: 
          {
          } 
         } 
       ], 
       parameterEditors:[], 
    
      //array of files we want to inject into the application on app_start
      javascript: 
      [
        '~/App_Plugins/BrightcovePicker/brightcovepicker.controller.js?cache=7'
      ], 
      css: [] 
    } 
    

    example of the JSON returned from the $http.get since you can't call the actual location.

    [
       {
          "Id": "4446300691001",
          "Title": "Title 1",
          "HTMLTitle": "Title 1"
       },
       {
          "Id": "3701697790001",
          "Title": "Title 2",
          "HTMLTitle": "Title 2"
       },
       {
          "Id": "4490923872001",
          "Title": "Title 3",
          "HTMLTitle": "Title 3"
       },
       {
          "Id": "3812171264001",
          "Title": "Title 4",
          "HTMLTitle": "Title 4"
       }
    ]
    

    Help Please!!! :)

  • Andy Vennells 19 posts 59 karma points
    Aug 03, 2016 @ 01:28
    Andy Vennells
    0

    I have implemented a select input with a flat JSON array that has no properties (a simple 1 dimensional array of values). This page helped me implement it but I thought I would post my solution to help anyone further:

    <div ng-controller="emailtemplate.editorcontroller">
    <select name="repeatSelect" id="repeatSelect" ng-model="model.value" ng-options="result as result for result in model.results">
    </select></div>
    

    and in my controller I bound my data response as follows:

    $http.get(url).then(function (response) {
            $scope.model.results = response.data;
    });
    
Please Sign in or register to post replies

Write your reply to:

Draft