标签: angular-ui

有对象的Angular UI select2数组有可能吗?

有没有一种简单的方法可以将选项作为数组中的对象?如下:

$scope.search.categories = [{id: '1',name: 'first'},{id: '2',name: 'last'}];

<select ui-select2 ng-model="search.categories" multiple style="width:300px" data-placeholder="select category">
  <option ng-repeat="category in search.categories" value="{{category}}">{{category.name}}</option>

</select>
Run Code Online (Sandbox Code Playgroud)

或者我完全错了?

javascript angularjs jquery-select2 angular-ui

2
推荐指数
1
解决办法
7929
查看次数

angular-ui/bootstrap:测试使用对话框的控制器

我有一个控制器使用angular-ui/bootstrap中的Dialog:

   function ClientFeatureController($dialog, $scope, ClientFeature, Country, FeatureService) {

        //Get list of client features for selected client (that is set in ClientController)
        $scope.clientFeatures = ClientFeature.query({clientId: $scope.selected.client.id}, function () {
            console.log('getting clientfeatures for clientid: ' + $scope.selected.client.id);
            console.log($scope.clientFeatures);
        });

        //Selected ClientFeature
        $scope.selectedClientFeature = {};

        /**
         * Edit selected clientFeature.
         * @param clientFeature
         */
        $scope.editClientFeature = function (clientFeature) {
            //set selectedClientFeature for data binding
            $scope.selectedClientFeature = clientFeature;

            var dialogOpts = {
                templateUrl: 'partials/clients/dialogs/clientfeature-edit.html',
                controller: 'EditClientFeatureController',
                resolve: {selectedClientFeature: function () {
                    return clientFeature;
                } …
Run Code Online (Sandbox Code Playgroud)

javascript testing jasmine angularjs angular-ui

2
推荐指数
1
解决办法
5112
查看次数

Jade,Angular和ngSwitch

ng-switch由于某种原因,我有一个问题,即使模型更新,视图也不会切换.它总是显示默认视图(仅用于测试),一切都应该在完整的HTML中正常工作,如此处测试http://plnkr.co/edit/fKlPKy?p=preview所以我想这是来自玉:

    .btn-group(data-toggle='buttons-radio', style='float:right; margin-right:20px;')
      .btn(ng-model='displayType', btn-radio="'grid'")
        i.icon-th
      .btn(ng-model='displayType', btn-radio="'list'")
        i.icon-align-justify

  .switch(ng-switch, on='displayType')
    .switch(ng-switch-when='grid')
      include gridView
    .switch(ng-switch-when='list')
      include listView
    pre(ng-switch-default) {{displayType}}
Run Code Online (Sandbox Code Playgroud)

我可以在默认视图中看到,displayType根据所选的收音机,它已正确更新为"网格"或"列表"

更新了该区域的完整HTML:

<div ng-controller="cardCtrl" class="container ng-scope">
  <div class="card-list-header">
    <div class="card-search">
      <div align="center" class="input-append">
        <input type="text" ng-model="searchterm" placeholder="Type in filter criteria and press Enter..." ui-keypress="{13:'keypressCallback($event)'}" class="input-xxlarge ng-valid ng-dirty"><span ng-click="addCard()" class="add-on">+</span>
      </div>
    </div>
    <div data-toggle="buttons-radio" style="float:right; margin-right:20px;" class="btn-group">
      <div ng-model="displayType" btn-radio="'grid'" class="btn ng-pristine ng-valid active"><i class="icon-th"></i></div>
      <div ng-model="displayType" btn-radio="'list'" class="btn ng-pristine ng-valid"><i class="icon-align-justify"></i></div>
    </div>
  </div>
  <div ng-switch="ng-switch" …
Run Code Online (Sandbox Code Playgroud)

angularjs angular-ui pug

2
推荐指数
1
解决办法
2470
查看次数

仅搜索ui.bootstrap typeahead中的特定字段

我正在改进我的ui.bootstrap typeahead添加一些awesomne​​ss,但我在这个上苦苦挣扎.

我创建了一个小型的Plunker来演示我的问题:http://plnkr.co/edit/u2Le37?p = preview

关于这个问题的两个词:
我有这个对象数组填充我$scope.data但我无法告诉我typeahead只使用特定字段来搜索结果

$scope.data = [
  {
    name: 'Mario',
    desc: 'Super Plumber',
    id: 0,
    type: 'good'
  },
  {
    name: 'Luigi',
    desc: 'Assistant Plumber',
    id: 1,
    type: 'good'
  }, 
...
Run Code Online (Sandbox Code Playgroud)


每当您在预先搜索时,您将搜索对象中的每个字段,甚至typeid

我尝试过这样的解决方案,但没有成功:

typeahead="datum.name as ( datum.name +', '+ datum.desc) 
    for datum in data | filter:$viewValue | limitTo:8"

---> no change


typeahead="datum as ( datum.name +', '+ datum.desc) 
    for datum.name in data | filter:$viewValue | limitTo:8"

--> no match …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angular-ui angular-ui-bootstrap

2
推荐指数
1
解决办法
1707
查看次数

双向绑定不使用带有angularjs的模态(子控制器)中的变量

您好我有一个产品列表,我希望人们选择其中一个,然后一个模态显示他们可以输入额外的信息(评论).我正在使用'AngularJS'与'Angular-UI'和'Angular-UI-bootstrap'.我想我能够如何使用http://angular-ui.github.io/bootstrap/#/modal上给出的示例,但是我似乎无法保存评论.它始终保持"请输入评论".这是代码:

模态模板:

   <script type="text/ng-template" id="orderModal">
        <div class="modal-header">
            <h3>Title</h3>
        </div>
        <div class="modal-body">
            <div class="alignleft">{{Product.Naam}}</div>
            <div class="alignright">€{{Product.Prijs}}</div>
            <div style="clear: both;"></div>
            <p>Heeft u een nog opmerking bij dit product?</p>
            <input type="text" name="Comment" ng-model="Comment" />
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">Toevoegen</button>
            <button class="btn btn-warning" ng-click="cancel()">Annuleren</button>
        </div>
    </script>
Run Code Online (Sandbox Code Playgroud)

这是控制器:

productModule.controller("ProductsController", function ($scope, bootstrappedData, $modal, $log) {
    $scope.products = bootstrappedData.products;

    ...
    $scope.AddNormalOrder = function (product) {
            ....
    };

    $scope.OpenModal = function (product)
    {
        var modalInstance = $modal.open({
            templateUrl: 'orderModal',
            controller: ModalInstanceCtrl,
            resolve: { …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angular-ui angularjs-scope angular-ui-bootstrap

2
推荐指数
1
解决办法
3362
查看次数

AngularJS UI-Router,解析$ http依赖在minify时丢失

我正在尝试在控制器加载之前解析一些数据.在开发代码上按预期工作,但是当我缩小它时,我的$httpget被替换为e或者可用的任何变量.

我不能注入$httpangular.module("app", []).config.所以我不知道如何解决这个问题.

angular.module("app", [
  "app.controllers"
  "app.directives"
  "app.filters"
  "app.services"
]).config ($stateProvider, $urlRouterProvider) ->

  $stateProvider.state("tab",
    url: "/tab"
    abstract: true
    templateUrl: "tpls/tabs.html"
  )

  .state("tab.programs",
    url: "/programs"
    abstract: true
    resolve:
      events: ($http) -> # $http get's replaced upon minification..
        $http.get('my.example.site/events.json')
          .then((data) ->
            data.data
          )
Run Code Online (Sandbox Code Playgroud)

javascript performance minify angularjs angular-ui

2
推荐指数
1
解决办法
1991
查看次数

Karma + ui-router失败:无法读取未定义的属性'isDefined'

ui-router在Angular项目中使用.为了测试,我正在使用KarmaJasmine.

运行时Karma,我收到以下错误:

Uncaught TypeError: Cannot read property 'isDefined' of undefined
at /Applications/MAMP/htdocs/examtesting/js/vendor/angular-ui-router.min.js:7
Run Code Online (Sandbox Code Playgroud)

我如何通过这个?

这是整个终端:

patrickreck@Patricks-MacBook-Pro /A/M/h/examtesting> karma start karma.conf.js 
INFO [karma]: Karma v0.12.16 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 35.0.1916 (Mac OS X 10.9.2)]: Connected on socket xtivwYEP-4sBQAeAlsMl with id 73870853
Chrome 35.0.1916 (Mac OS X 10.9.2) ERROR
  Uncaught TypeError: Cannot read property 'isDefined' of undefined
  at /Applications/MAMP/htdocs/examtesting/js/vendor/angular-ui-router.min.js:7
Run Code Online (Sandbox Code Playgroud)

javascript jasmine angularjs angular-ui karma-runner

2
推荐指数
1
解决办法
7134
查看次数

将已解析的对象传递到由angular-ui路由器中的字符串定义的控制器中

我有一组使用以下方法解决的对象:resolve

我也有一个控制器,我通过将其作为字符串传递给它来定义,但我需要将已解析的对象传递给它.

我知道它可以这样做:

resolve: { title: 'My Contacts' },
  controller: function($scope, title){
    $scope.title = 'My Contacts';
  }
}
Run Code Online (Sandbox Code Playgroud)

但我需要这样做:

resolve: { title: 'My Contacts' },
  controller: 'ResultsController'
}
Run Code Online (Sandbox Code Playgroud)

在这个意义上,如何将"标题"传递给我的控制器?

谢谢,詹姆斯

angularjs angular-ui angular-ui-router

2
推荐指数
1
解决办法
2870
查看次数

年度选择器弹出与角-ui bootstrap

我正在尝试使用angular-ui Bootstrap datepicker指令来选择年份.

它在内联时工作,但不在弹出窗口中.通过datepicker-options设置选项与弹出窗口无关.

看到这个Plunker:http://plnkr.co/edit/GRqSTCE7hOP6ZbBY3dZd

为什么这个datepicker:

内联年份选择器工作

<datepicker ng-model="dt"    datepicker-mode="'year'"
    min-mode="year"  min-date="minDate" 
    show-weeks="false" class="well well-sm"></datepicker>
Run Code Online (Sandbox Code Playgroud)

行为与此不同:

弹出年份选择器不起作用

<input type="text" class="form-control" ng-model="dt" 
         datepicker-mode="'year'"
    min-mode="year"  min-date="minDate" 
    show-weeks="false"
    datepicker-popup="{{format}}"  is-open="opened" ng-focus="open($event)"
          date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
Run Code Online (Sandbox Code Playgroud)

我错过了什么?

angularjs angular-ui angular-ui-bootstrap

2
推荐指数
1
解决办法
9847
查看次数

在angular-ui bootstrap轮播之外获取活动幻灯片索引

我有一个获得活动幻灯片在角UI引导的问题carousel 之外carousel.
我有一个面板,里面有旋转木马,并希望将按钮放在面板的页脚中,使用所选幻灯片进行操作,但使用jquery选择器不是一个选项.

我想用纯角度的东西来实现它.
我想我可以使用active属性,但也许有一些聪明的东西可以更顺利地完成.

一些代码(Jade语法):

.panel.panel-info
  .panel-body
    carousel.imgCarousel(interval='5000')
      slide(ng-repeat='media in selCard.superviseTab.media')
        img.img-responsive(preload-image ng-src='/api/cards/{{selCard.superviseTab.sID}}/media/{{$index}}')
        .carousel-caption
          multiSelect
          h4 Slide {{$index+1}} of {{selCard.superviseTab.media.length}}
          p {{media.originalFilename}}
  .panel-footer
    .navbar-collapse.collapse
      ul.nav.navbar-nav.navbar-left
        li
          a.btn.btn-danger
            i.fa.fa-unlink
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap angularjs angular-ui angular-ui-bootstrap

2
推荐指数
1
解决办法
3255
查看次数