Chained menus during edit form

kliolios commented 10 years ago

Hello,

Thanks for this great library. I want to have a checklist chained to a dropdown menu. The checklist's values are provided by a factory that accepts a parameter (dropdown's selected value). The dropdown has its values populated by a different factory as well. Is it possible, to update the checklist options dynamically while on edit form mode?

Thanks Dino

kliolios commented 10 years ago

I should also add that I do not want to use a nested generic structure. At this point want the values coming for 2 separate factories.

kliolios commented 10 years ago

I am using e-ng-model and e-ng-change but somehow the currently selected value does not go through. Same happens when I use $watch as mentioned here: https://github.com/vitalets/angular-xeditable/issues/45 Can it be that it does not work from a form?

kliolios commented 10 years ago

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ng-app="contentProviderApp">
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="lib/bootstrap-3.1.1-dist/css/bootstrap.css">
  <script src="lib/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js"></script>
<link href="lib/angular-xeditable/css/xeditable.css" rel="stylesheet">
<script src="lib/angular-xeditable/js/xeditable.js"></script>
  <script src="js/controller2.js"></script>
  <style type="text/css">

        a[ ng-click ] {
            cursor: pointer ;
            text-decoration: underline ;
        }

    </style>
</head>
<body>
<head>
</head>
<body ng-controller=ContentProviderController>
  {{myModel.category}}
 <form editable-form name="editableForm" >
<label>Category</label><br>
<span editable-select ="myModel.category" e-name="categoryDrop" e-ng-options="c for c in categories">{{ showCategories() }}</span><br><br>

<label>Genres</label><br>
      <span editable-checklist ="myModel.genre" e-name="name" e-ng-options="g for g in chainedGenres">{{ showGenres() }}</span><br><br>

</div>     <!-- button to show form -->
      <button type="button" class="btn btn-success" ng-click="editableForm.$show()" ng-show="!editableForm.$visible"><span class="glyphicon glyphicon-pencil"></span\
>
        Edit
      </button>
            <button class="btn btn-primary" ng-click="ok()"  ng-show="!editableForm.$visible">Close</button>
      <span ng-show="editableForm.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting"  ng-click="updateAsset(assetToEdit)">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
          Cancel
        </button>
      </span>
</form>

</body>
</html>

kliolios commented 10 years ago

controller2.js:

var contentProviderApp = angular.module('contentProviderApp', ["xeditable", "ui.bootstrap"]);

 contentProviderApp.service('genresService', function () {
    this.controlledGenreList = function (category) {
        if (category == 'TV') {
            return ['Action & Adventure', 'Anime & Animation', 'Comedy', 'child_protection_advisory', 'Daytime', 'Documentary', 'Drama', 'Educational', 'Espanol', '\
Kids & Family', 'Guys', 'International', 'Lifestyle', 'Reality', 'Sci-fi & Fantasy', 'Special Events', 'Technology', 'Teens', 'Weather', 'Women'];
        } else if (category == 'News') {
            return ['US', 'World', 'Politics', 'Business', 'Health', 'Science', 'Entertainment', 'Shows'];
        } else if (category == 'Sports') {
            return ['Baseball', 'Basketball', 'Boxing', 'Fitness', 'Football', 'Golf', 'Hockey', 'Mixed Martial Arts', 'Motorsports', 'News', 'Shows', 'Soccer', 'Sp\
ecial Events', 'Swimming & Diving'];
        } else if (category == 'Movies') {
            return ['Action & Adventure', 'Anime & Animation', 'Comedy', 'Documentary', 'Drama', 'Educational', 'Horror', 'Kids & Family', 'Music', 'Romance', 'Sci-\
fi & Fantasy', 'Sports', 'Western'];
        } else if (category == 'Music') {
            return ['Alternative', 'Blues', 'Children’s Music', 'Classical', 'Country', 'Dance', 'Hip-Hop/Rap', 'Holiday', 'Gospel', 'Jazz', 'Latino', 'New Age', 'O\
pera', 'Pop', 'R&B/Soul', 'Reggae', 'Rock', 'World'];
        } else {
                return ['astrology', 'comedy', 'mystery'];
        }
    }
});
contentProviderApp.service('categoriesService', function () {
    this.controlledCategories = function () {
        return ['News', 'Sports', 'TV', 'Movies', 'Music', 'test', 'news', 'entertainment', 'movies', 'tv'];
    }
});

contentProviderApp.controller('ContentProviderController', function ($scope, genresService, categoriesService) {
  $scope.myModel = {"category":"News", "genre":"World"};

        $scope.categories = categoriesService.controlledCategories();
        $scope.genres = genresService.controlledGenreList($scope.myModel.category);

        $scope.showGenres = function () {
            var selected = [];
            angular.forEach($scope.genres, function (s) {
                if ($scope.myModel.genre == s) {
                    selected.push(s);
                }
            });
            return ($scope.myModel.genre && selected.length) ? selected.join(', ') : 'Not set';
        };

        $scope.showCategories = function () {
            var selected = [];
            angular.forEach($scope.categories, function (s) {
                if ($scope.myModel.category == s) {
                    selected.push(s);
                }
            });

// monitor select through ng-change
        $scope.updateGenres = function(){
            alert($scope.myModel.category);
        }

  // watch change of select
  $scope.$watch('myModel.category', function(newValue, oldValue) {
alert(newValue);
alert(oldValue);
      if (newValue === oldValue) return;
  });

});

tthew commented 10 years ago

:+1: Being able to manipulate the 'temporary model' while a form is $visible would be super useful. For example, I have a bunch of forms in rows, containing editable-selects that I need to be able to validate (checking the values in other rows) on a change event (rather than on submit). Can't see an obvious solution to this problem.

dlussky commented 8 years ago

+1000 for inner temporary model manipulation, we're struggling with location form, where city selection is based on country.

sukh48 commented 8 years ago

Looking for the same solution.

ckosloski commented 6 years ago

Maybe the comments in #521 will help

vitalets / angular-xeditable

Chained menus during edit form #129