过滤器抛出10 $ digest（）迭代

时间：2016-03-29 12:06:42

标签： angularjs

我有一个使用ng-options填充的工作选择。但是，我需要包含一个布尔值（expectativa）来查看它是否真的应该显示。

<select name="user_model"                                     
                    ng-model="formAparteModel.user_model"
                    ng-options="vehiculo.nombre for vehiculo in vehiculos track by vehiculo.id | filter: {expectativa:1} ">

当我添加过滤器时，我得到scripts.min.js：18错误：[$ rootScope：infdig] 10 $ digest（）迭代到达。中止！

我的目标是：

[  
   {  
      "id":"mazda-2",
      "nombre":"MAZDA 2",
      "thumb":"//www.mydomain.com/resources/images/5df8930b60c821be8214095442d39db8.png",
      "precio":"53000000",
      "fondo":"//www.mydomain.com/resources/images/31653b676767edacfdf86028851c064a.jpg",
      "descripcion":"<h4>EN ESENCIA ES ENERG&Iacute;A Y DIVERSI&Oacute;N.</h4>\n<p>Trazar su propio camino. Establecer sus propias normas. Ir m&aacute;s all&aacute;. El dise&ntilde;o del Nuevo Mazda 2 es una expresi&oacute;n din&aacute;mica de fuerza y vitalidad, muy por encima de las convenciones de su categor&iacute;a. La revolucionaria TECNOLOG&Iacute;A SKYACTIV entrega la conexi&oacute;n hombre-veh&iacute;culo Jinba-Ittai que genera un extraordinario placer de conducci&oacute;n, junto con un excelente desempe&ntilde;o en seguridad y un mejor comportamiento ambiental. S&oacute;lo con verlo, las personas quieren subir y conducirlo. El Nuevo Mazda 2 despertar&aacute; siempre una sonrisa en quien lo conduce y un ilimitado placer de conducci&oacute;n en el coraz&oacute;n.

      [  
         {  
            "link":"api/versiones/touring"
         },
         {  
            "link":"api/versiones/grand-touring"
         }
      ],
      "colores":[  
         {  
            "imagen":"//www.mydomain.com/resources/images/204dd0d42907354a508c3df15c98a5c3.jpg",
            "relative":"204dd0d42907354a508c3df15c98a5c3.jpg",
            "nombre":"Rojo Místico",
            "descripcion":"#c50e11",
            "baja":"//www.mydomain.com/resources/images/f51b4f68ebedd32dfdd40aace933be38.jpg"
         },
         {  
            "imagen":"//www.mydomain.com/resources/images/d4ef600ffae3ba558df652139654e4b9.jpg",
            "relative":"d4ef600ffae3ba558df652139654e4b9.jpg",
            "nombre":"Aluminio Metálico",
            "descripcion":"#7f848b",
            "baja":"//www.mydomain.com/resources/images/1d68792aa2f999b2e11c4180db783533.jpg"
         },
         {  
            "imagen":"//www.mydomain.com/resources/images/6912688d7fcd13f023e4d13ba4090f7d.jpg",
            "relative":"6912688d7fcd13f023e4d13ba4090f7d.jpg",
            "nombre":"Titanium Flash",
            "descripcion":"#997458",
            "baja":"//www.mydomain.com/resources/images/1df546bae12fd9a83ffadd245a8f63d4.jpg"
         },
         {  
            "imagen":"//www.mydomain.com/resources/images/b721c87cf7d9b467bf14205e6968be5e.jpg",
            "relative":"b721c87cf7d9b467bf14205e6968be5e.jpg",
            "nombre":"Blanco Nieve Perlado",
            "descripcion":"#fdfdfd",
            "baja":"//www.mydomain.com/resources/images/ae00e27896ea26f9d3af653a97e6a894.jpg"
         },
         {  
            "imagen":"//www.mydomain.com/resources/images/cb9728d3393b87ae8a6d0c09f466ffae.jpg",
            "relative":"cb9728d3393b87ae8a6d0c09f466ffae.jpg",
            "nombre":"Azul Dinámico",
            "descripcion":"#21c1f8",
            "baja":"//www.mydomain.com/resources/images/d5e59fa539d057d69f1919c4aeaf13d8.jpg"
         },
         {  
            "imagen":"//www.mydomain.com/resources/images/661ae5a97b2024a6165ead3105f84b12.jpg",
            "relative":"661ae5a97b2024a6165ead3105f84b12.jpg",
            "nombre":"Gris Meteoro",
            "descripcion":"#525d72",
            "baja":"//www.mydomain.com/resources/images/f0b9f94d0c6413f76d5eb50e5bb1dea6.jpg"
         },
         {  
            "imagen":"//www.mydomain.com/resources/images/f7c7f4f4f21cc1727fa93b1cbdd2de74.jpg",
            "relative":"f7c7f4f4f21cc1727fa93b1cbdd2de74.jpg",
            "nombre":"Negro fugaz",
            "descripcion":"#1e1f21",
            "baja":"//www.mydomain.com/resources/images/bb48874d9ba03d1879401e661a0402b9.jpg"
         },
         {  
            "imagen":"//www.mydomain.com/resources/images/a12d23426b6cddf9934f6debe1e9c7bf.jpg",
            "relative":"a12d23426b6cddf9934f6debe1e9c7bf.jpg",
            "nombre":"Azul Esplendor",
            "descripcion":"#5994c1",
            "baja":"//www.mydomain.com/resources/images/4cd9241afc02f08f7fc72524b8b55859.jpg"
         },
         {  
            "imagen":"//www.mydomain.com/resources/images/5ff1a99e0a605dc37962205e035ae023.jpg",
            "relative":"5ff1a99e0a605dc37962205e035ae023.jpg",
            "nombre":"Azul Metálico",
            "descripcion":"#284573",
            "baja":"//www.mydomain.com/resources/images/6f8c0c2acdc07f8a4b2ce96590a0af95.jpg"
         }
      ],
      "clase":"blanco",
      "llantas":"//www.mydomain.com/resources/images/382ad8e7714c3c20676bba6d69861d91.gif",
      "expectativa":"0"
   },
   {  
      "id":"mazda-3",
      "nombre":"MAZDA 3",
      "thumb":"//www.mydomain.com/resources/images/9380fed61397b6622e8d901427df9822.png",
      "precio":"60000000",
      "fondo":"//www.mydomain.com/resources/images/e97209a65c4e775838f48d9f41d3823a.jpg",
      "descripcion":"<h4>UN VEH&Iacute;CULO QUE DESAF&Iacute;A LOS L&Iacute;MITES</h4>\n<p>El Nuevo Mazda 3 te llevar&aacute; a vivir una experiencia de manejo sin precedentes gracias a la revolucionaria Tecnolog&iacute;a SKYACTIV y el distintivo concepto de dise&ntilde;o &quot;KODO - Alma del Movimiento&quot;. El resultado, un veh&iacute;culo totalmente reinventado que llega para desafiar lo convencional, al combinar una experiencia de conducci&oacute;n y una maniobrabilidad emocionante al tiempo que ofrece un consumo de combustible y una reducci&oacute;n en las emisiones de CO2 incomparables.</p>\n<p>El Nuevo Mazda 3 tambi&eacute;n es el primer modelo de Mazda que ofrece Mazda Connect, un completo sistema de conectividad m&oacute;vil que te permite acceder a una amplia variedad de contenidos.&nbsp;</p>",

          "versiones":[  
             {  
                "link":"api/versiones/prime"
             },
             {  
                "link":"api/versiones/touring-1"
             },
             {  
                "link":"api/versiones/grand-touring-1"
             }
          ],
          "colores":[  
             {  
                "imagen":"//www.mydomain.com/resources/images/cd59557fbeba5eb8c31ac7e9816e42ff.jpg",
                "relative":"cd59557fbeba5eb8c31ac7e9816e42ff.jpg",
                "nombre":"Rojo Místico",
                "descripcion":"#9d0e01",
                "baja":"//www.mydomain.com/resources/images/e883846dd223baed0d602101a460b40f.jpg"
             },
             {  
                "imagen":"//www.mydomain.com/resources/images/14af8b6a1cc74035737b323247cddefa.jpg",
                "relative":"14af8b6a1cc74035737b323247cddefa.jpg",
                "nombre":"Aluminio Metálico",
                "descripcion":"#697073",
                "baja":"//www.mydomain.com/resources/images/e3c53025bcfb83c8c449bd5238f942f3.jpg"
             },
             {  
                "imagen":"//www.mydomain.com/resources/images/c312da48e408cedef9767e706b864283.jpg",
                "relative":"c312da48e408cedef9767e706b864283.jpg",
                "nombre":"Negro fugaz",
                "descripcion":"#191b1c",
                "baja":"//www.mydomain.com/resources/images/be09981d25d43247474acdaffd3d2aa2.jpg"
             },
             {  
                "imagen":"//www.mydomain.com/resources/images/6a22f6326a6df70e037840231d6faa83.jpg",
                "relative":"6a22f6326a6df70e037840231d6faa83.jpg",
                "nombre":"Blanco Nieve Perlado",
                "descripcion":"#dbe9ee",
                "baja":"//www.mydomain.com/resources/images/1f5573b113eca00230ed48e407d73c77.jpg"
             },
             {  
                "imagen":"//www.mydomain.com/resources/images/0fa3ad575296ba9078bc993918d2362c.jpg",
                "relative":"0fa3ad575296ba9078bc993918d2362c.jpg",
                "nombre":"Gris Meteoro",
                "descripcion":"#4e5d6e",
                "baja":"//www.mydomain.com/resources/images/8f04fbee584d3c1ba6f6a18661fa930e.jpg"
             },
             {  
                "imagen":"//www.mydomain.com/resources/images/594ede9f41c40713855a73322b1c8af2.jpg",
                "relative":"594ede9f41c40713855a73322b1c8af2.jpg",
                "nombre":"Titanium Flash",
                "descripcion":"#926c43",
                "baja":"//www.mydomain.com/resources/images/7f4cea61541ae61f1c17665d9cb8ed83.jpg"
             },
             {  
                "imagen":"//www.mydomain.com/resources/images/162e522b1a3f5206af807f5e624f15bd.jpg",
                "relative":"162e522b1a3f5206af807f5e624f15bd.jpg",
                "nombre":"Azul Metálico",
                "descripcion":"#244265",
                "baja":"//www.mydomain.com/resources/images/3eb16324f03852506dba45ac03abecb9.jpg"
             }
          ],
          "clase":"negro",
          "llantas":"//www.mydomain.com/resources/images/f0ebfc78502def1a7af8816e3266d778.gif",
          "expectativa":"0"
       },  
    ]

这是https://jsfiddle.net/nkehtnwg/

的小提琴

我的代码有什么问题？

3 个答案:

答案 0 :(得分：1)

<select name="user_model"                                     
                    ng-model="formAparteModel.user_model"
                    ng-options="vehiculo.nombre for vehiculo in vehiculos track by vehiculo.id | filter: {expectativa:1} ">

根据我的理解，您试图隐藏基于expectativa值的选项。在这种情况下，为什么不使用ng-show？它不会不必触发摘要周期。 

<select name="user_model"                                     
                    ng-model="formAparteModel.user_model"
                    ng-options="vehiculo.nombre for vehiculo in vehiculos track by vehiculo.id" ng-show="expectativa == '1'">

或者您可以ng-if使用ng-if="expectativa =='1'"

答案 1 :(得分：0)

您也可以选择ng-repeat选项并使用ng-if或ng-show或ng-hide作为：

<select name="user_model" ng-model="formAparteModel.user_model">
      <option ng-repeat="vehiculo for vehiculo in vehiculos track by vehiculo.id" ng-if="vehiculo.expectativa == 1" value="vehiculo.id">{{vehiculo.nombre}}</option>
</select>

答案 2 :(得分：0)

我终于找到了两个解决方案。

跟踪和过滤碰撞，因此当我通过vehiculo.id删除曲目时它可以正常工作

    <select name="user_model"                                     
            ng-model="formAparteModel.user_model"
            ng-options="vehiculo.nombre for vehiculo in vehiculos | filter: {expectativa:1} ">

如果我仍需要按ID跟踪但我需要按expectativa过滤怎么样？您可以在跟踪前进行过滤。 

<select name="user_model"                                     
                    ng-model="formAparteModel.user_model"
                    ng-options="vehiculo.nombre for vehiculo in (vehiculos | filter: {expectativa: 0}) track by vehiculo.id" 
                    >

为什么会发生这种情况，是因为你必须在对集合进行所有更改后进行跟踪。

相关问题
最新问题