Можно ли открыть диалог или перейти на новую страницу в зависимости от значения объекта, используя всего одну кнопку?

0

Я пытаюсь использовать одну кнопку "создать", которая либо открывает диалог, либо переходит на новую страницу с использованием ui-router, в зависимости от значения объекта.

Я не уверен в лучшем способе этого добиться, у меня есть что-то, что работает, но мне интересно, есть ли лучший способ. В настоящее время я использую две кнопки и ng - если скрыть кнопку, которая мне не нужна в то время, но это кажется мне грязным.

Здесь очень простой пример того, что я пытаюсь сделать. Вместо того, чтобы открывать диалог или изменять содержимое страницы, я просто добавил предупреждения.

http://codepen.io/jwelker9/pen/QNPgyE?editors=1010

Короче говоря, я не уверен, как получить ui-sref и диалог, чтобы играть вместе на одной и той же кнопке.

HTML:

<div ng-controller = "lists-detail" ng-app="app">

  <table class="listing">
    <thead>
      <tr>
        <th>Item-Id:</th>
        <th>Ordinal:</th>
        <th>Type:</th>
        <th>Content-Id:</th>
        <th>
          <button ng-if="!boolean"
              class="button"
              aria-label="Add list item"
              ui-sref="site.lists">
            Add New
          </button>

          <button ng-if="boolean"
              class="button"
              aria-label="Add list item"
              ng-click="dialog()">
            Add New
          </button>

        </th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

JS:

var app = angular.module('app', []);

app.controller('lists-detail', function ($scope) {


  //actual code looks like: 
  //This calls an API to determine if it is correct type or not
  //If boolean is true, it should open a new dialog 
  //if(listType == 'Episode'){
      $scope.boolean = false;
  //}  

  $scope.goToNewPage = function() {
    alert("NewPage");
  }

  $scope.dialog = function() {
    alert("Open Dialog");
  }
})
  • 0
    вам нужно использовать $ route для перехода на другую страницу или вы можете изменить объект $ location (window.location.href) по коду
  • 0
    Да, обычно я использую ui-router, чтобы перейти на новую страницу. У меня просто нет этого кода для простоты. Проблема в том, что я не уверен, как заставить работать единственную кнопку, чтобы можно было открывать диалог или использовать ui-router, в зависимости от значения $ scope.boolean.
Теги:
angular-ui-router

2 ответа

2
Лучший ответ

Если я правильно понимаю ваш вопрос, вы можете просто вызвать функцию, когда значение изменится и принять решение в функции следующим образом:

https://jsfiddle.net/tma739u9/

угловатый

vm.boolean = false;
vm.watchBoolean = function() {
    var decision = (!vm.boolean) ? newPage() : dialog();
}

function newPage() {
    $location.path('/page');
}

function dialog() {
    alert('Open dialog');
}

HTML

 <input
  type="checkbox"
  ng-model="ctrl.boolean"
  ng-click="ctrl.watchBoolean()"> Click Me
Поделиться
  • 0
    Извините, что допустил ошибку в своем вопросе, это сработало бы идеально; однако я использую ui-router, чтобы направить пользователя на новую страницу. Я обновил свой код, чтобы показать это. Есть ли способ оценить, как вы уже сделали выше, но использовать маршрутизатор вместо newPage () в качестве ng-клика ??
  • 1
    Вы можете добавить $ location как зависимость, а в своей функции newPage вы можете использовать $ location.path ('somepage'). Это будет направлять на новую страницу.
Показать ещё 4 комментария
1

В своем ng-click вы можете использовать выражение "Угловое выражение":

ng-click="boolean==true? dialog() : gotoNewPage()"

Это сокращенный способ сказать это в Javascript:

if (boolean) {
    dialog();
} else {
    gotoNewPage();
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню