小编Tom*_*ien的帖子

我想使用ng-show和动画为无序列表中的某些对象创建一个滑块.当物体向一个方向滑动时,我的效果很好.

但是,当我希望用户能够向左或向右滑动对象时,使用ng-class更改类,动画不再有效.

左/右案例的html是:

<div class="slide-holder">
  <ul class="slide-list">
    <li class="slide-object" ng-show="directionElement == 0" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 1! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 1" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 2! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 2" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 3! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 3" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 4! …

我是Angular 2的新手,我试图为*ngFor中的div提供一个动态分配的id.我希望这些div被称为'wave1,wave2,wave3'等.

<li *ngFor="let episode of episodes; let i = index">
    <div id="wave{{i}}"></div>
</li>

但是,这会引发以下错误:

ERROR DOMException: Failed to execute 'querySelector' on 'Document':
     '#wave[object Object]' is not a valid selector.

我还没有能够在stackoverflow上为Angular 2找到答案.如果这是重复的道歉

我正在尝试在我的项目中使用UI Bootstrap Pagination指令,但由于某些奇怪的原因,用于更新当前页面的ng模型不起作用.使用正确数量的选项卡和所有内容正确显示分页,但是当我单击其他数字时,ng-model变量不会更新.对于我的生活,我无法弄清楚为什么不.

我使用的代码取自UI Bootstrap主页上的示例:

<uib-pagination total-items="totalItems" ng-model="currentPage"
  ng-change="pageChanged()"></uib-pagination>

控制器看起来像这样:

$scope.currentPage = 1;
$scope.totalItems = 160;

$scope.pageChanged = function() {
  console.log('Page changed to: ' + $scope.currentPage);
};

以下是我需要的不同来源:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>

最奇怪的是我创建了一个复制我的代码的plnkr,它的工作原理!你可以在这里看到:http://plnkr.co/edit/4DoKnRACbKjLnMH5vGB6

任何人都可以想到可能导致这种情况无效的任何想法吗？我在这里摸不着头脑,想不出任何明显我做错的事......

所有的帮助都很有帮助!

我正在使用一个简单的 svg 图标。我将它的高度和宽度设置为 16px。当我检查 svg 元素时，它是 16px。然而，它看起来比需要与之分组的其他图标要小一些。

当我检查 svg 中唯一的“路径”时，它的大小是 15.625px。

这是 svg：

<svg height="16px" style="enable-background:new 0 0 512 512;"
  version="1.1" viewBox="0 0 512 512" width="16px" xml:space="preserve"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M456,506H56c-27.617,0-50-22.393-50-50V56 C6,28.383,28.383,6,56,6h400c27.618,0,50,22.383,50,50v400C506,483.607,483.618,506,456,506z M214.213,259.408  c0-0.762-0.195-1.475-0.224-2.227l98.73-54.814c9.649,8.135,21.953,13.232,35.576,13.232c30.655,0,55.498-24.843,55.498-55.488  c0-30.654-24.843-55.498-55.498-55.498c-30.654,0-55.498,24.844-55.498,55.498c0,2.832,0.43,5.557,0.84,8.272l-94.922,52.705  c-10.097-10.537-24.248-17.168-40-17.168c-30.644,0-55.488,24.844-55.488,55.488c0,30.654,24.844,55.498,55.488,55.498  c15.264,0,29.073-6.172,39.102-16.142l95.176,52.851c1.035,29.736,25.312,53.565,55.302,53.565  c30.655,0,55.498-24.844,55.498-55.499c0-30.644-24.843-55.488-55.498-55.488c-17.08,0-32.177,7.891-42.353,20.03l-92.1-51.133  C213.93,261.849,214.213,260.668,214.213,259.408z" id="share_1_" style="fill-rule:evenodd;clip-rule:evenodd;fill:grey;"/>
</svg>

如何使路径元素与其包含的 svg 元素大小相同？

IE。如果 svg 是 16px*16px 那么路径应该是 16px*16px - 而不是 15.625px*15.625px。

如果这是一个愚蠢的问题，请原谅我，但我是一个 svg 新手......

您可以在 plnkr 中看到它： http://plnkr.co/edit/0XBHg89HbUoPdDL22GSF

我试图让标题 div 从其父级继承其宽度。标题 div 是position: fixed. 父级包含在引导容器内。

但是，正如您在我创建的代码中看到的那样，它没有正确继承其父级的宽度 - 它从某处添加了一些额外的宽度。

这一切都非常烦人！知道如何解决这个问题吗？

.category-body {
  margin-left: 17% !important;
  width: 67%;
  background-color: red;
  height: 500px;
}
.category-header {
  position: fixed;
  top: 51px;
  width: inherit;
  background-color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="category-body">We are in the category-body
    <div class="category-header">We are in the category-header</div>
  </div>
</div>

http://plnkr.co/edit/yVk15RqDqAac4H2eDJQe

我正在对ng-repeat中的项目数组使用过滤器,如下所示:

<input type="text" ng-model="filterText">

<li ng-repeat="item in displayItems | filter : {item_name: filterText}>

这工作正常并完美地过滤项目.问题出现是因为我使用带有uib-pagination元素的displayItems.分页使用totalItems而不是displayItems.

<uib-pagination class="pagination-sm pagination"
    total-items="totalItems.length" ng-model="page" ng-change="changeItems()">
</uib-pagination>

显然我需要以某种方式将过滤器应用于total-items,然后创建displayItems,并将filteredItems放在uib-pagination中.

IE浏览器.当人员键入时,在控制器中将过滤器应用于totalItems,并创建分页所需的filteredItems.然后我还从filteredItems创建displayItems.如何将其放入控制器而不是用于ng-repeat的HTML？

我不知道该怎么做.有什么想法吗？所有人都非常感谢....

我已经包括了一个用来表明它(不是)工作的所有荣耀.... https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

因此，我一直在尝试构建一种很好的方式来表示应用程序中的分层数据。我为一些引导徽章创建了幻灯片效果，这些引导徽章用于使用AngularJS显示一些子类别。

我已经创建了以下示例（在您的stackoverflow-ers的帮助下！），该示例适用于父和子类型的数据。即。您不能同时成为父母和孩子，这是我的真实示例。

  <ul>
    <li ng-repeat="category in categories"
        ng-init="isChild = category.category_type == 'child'"
        ng-show="category.category_show"
        class="badge-slider">

      <span class="badge {{ isChild ? 'badge-c' : 'badge-p' }}"
            ng-click="isChild || updateResults(category)"
            ng-bind="category.category_name">
      </span>

    </li>
  </ul>

我正在努力了解更改代码的最佳方法是什么，以便它能够用于其他“父级和子级” category_type。创建浏览目录结构的方式需要此“父级和子级” category_type。

在上面的示例中，它依赖于布尔值'isChild'和三元运算符，当我们引入'parent and child'category_type时，该运算符不起作用。

任何人有任何想法吗？

以下是指向PLNKR的链接，该链接演示了用于简化父子关系的滑动功能：http : //plnkr.co/edit/9CiXW1YAoPj80x6PtBW3

编辑1：

我创建了另一个PLNKR来处理层次关系的3层性质。它可以正常工作，只是它不显示带有相应徽章的“父项和子项”元素。... http : //plnkr.co/edit/YoRI578GHE91t6torCUt

刚刚开始使用 svg。

我正在尝试绘制一个带边框的简单矩形，但边框似乎以某种方式给了我类似阴影的效果。它似乎绘制的右侧和底部边框比顶部和左侧边框粗得多。很奇怪。

当我做圆形边缘和正常锐利边缘时会发生这种情况。

这是代码：

<svg>
    <rect width="30" height="30" rx="5"
        style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

我已经包含了一个 PLNKR：http ://plnkr.co/edit/HGBTNyjasqzwtguOIbnV

我正在尝试使用 multipart/form-data 为 JAX-RS 上传文件。当我尝试启动服务器时，出现以下错误：

[[FATAL] No injection source found for a parameter of type public javax.ws.rs.core.Response
com.pododdle.resources.UploadResource.uploadAudio(int,int,java.io.InputStream,org.glassfish.jersey.media.multipart.FormDataContentDisposition)
    at index 2.;source='ResourceMethod{httpMethod=POST, consumedTypes=[multipart/form-data], producedTypes=[text/html], suspended=false, suspendTimeout=0, suspendTimeoutUnit=MILLISECONDS, invocable=Invocable{handler=ClassBasedMethodHandler{handlerClass=class 
com.pododdle.resources.UploadResource, handlerConstructors=[org.glassfish.jersey.server.model.HandlerConstructor@29d4c93f]}, definitionMethod=public javax.ws.rs.core.Response 
com.pododdle.resources.UploadResource.uploadAudio(int,int,java.io.InputStream,org.glassfish.jersey.media.multipart.FormDataContentDisposition), parameters=[Parameter [type=int, source=auction_id, defaultValue=null], Parameter [type=int, source=category_id, defaultValue=null], Parameter [type=class java.io.InputStream, source=file, defaultValue=null], Parameter [type=class org.glassfish.jersey.media.multipart.FormDataContentDisposition, source=file, defaultValue=null]], responseType=class javax.ws.rs.core.Response}, nameBindings=[]}']

我的 pom.xml 如下所示：

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.glassfish.jersey</groupId>
            <artifactId>jersey-bom</artifactId>
            <version>${jersey.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

<dependencies>
    <dependency>
        <groupId>org.glassfish.jersey.containers</groupId>
        <artifactId>jersey-container-servlet-core</artifactId>
    </dependency>

    <dependency>
        <groupId>org.glassfish.jersey.media</groupId>
        <artifactId>jersey-media-multipart</artifactId>
        <version>${jersey.version}</version>
    </dependency>

    <dependency>
        <groupId>org.jvnet.mimepull</groupId>
        <artifactId>mimepull</artifactId> …

我的 Angular 组件中有一个输入字段，我不想让用户在其中输入（空格）。

我试过使用

<input type="text" [(ngModel)]="inputText" pattern="[a-zA-Z]">

这不是我想要的，无论如何它都不起作用！

有人知道阻止（空格）键的正确正则表达式模式是什么吗？使用该模式的正确方法是什么，因为上述模式不起作用......

提前致谢。