ui.routerを使用してng-repeatでデータをフィルタリングする継承スコープ[Angular1.5]

おそらくui.routerを使用して継承スコープに問題があります。私はアドレスブックのような小さなアプリケーションを作成しています。私は他のページのアドレスをフィルタリングすることを可能にするnavbarの入力を持っていたいと思います（私がそこに書いているとき、parial viewはui-routerによって変更されるべきです）。私は、ui-ruterを使用しているサイトごとに、index.htmlとその他のtampletsという名前のビューを持っています。ui.routerを使用してng-repeatでデータをフィルタリングする継承スコープ[Angular1.5]

私が入力で書いているとき、ビューは変化していますが、データはフィルタリングされません。私は何の誤りもなかった。答えをありがとう。（リンク付きヘッダなし）

のindex.html（複雑な説明、その私の最初のポストのために申し訳ありませんが）

<body ng-app="appModule" ng-controller="applicationController"> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand">Contact Manger</a> 
    </div> 
    <div class="collapse navbar-collapse" id="nav-toggle"> 
     <ul class="nav navbar-nav"> 
      <li><a ui-sref="index">View</a></li> 
      <li><a ui-sref="add">Add Contact</a></li> 
     </ul> 
    <form class="navbar-form navbar-right" role="search"> 
     <input type="text" class="form-control" placeholder="Search" ng-model="search" ng-keyup="startSearch()"> 
    </form> 
    </div> 
</nav> 
<div class="container"> 
    <ui-view> 
    </ui-view> 
</div>

appModule.js

angular.module("appModule",[ 
"ui.router", 
"AddModule", 
"DetailsModule", 
"MainModule", 
"ngSanitize"])

appController.js

angular.module("appModule") 
.controller('applicationController', function($scope, $location){ 
    $scope.startSearch = function(){ 
     $location.path('index'); 
    }; 
});

router.js

angular.module('appModule') 
.config(function($stateProvider){ 

    $stateProvider.state('index',{ 
     url: '/index', 
     template: "<main-component></main-component>" 
    }) 
    .state('add',{ 
     url: '/add', 
     template: "<add-component></add-component>" 
    }) 
    .state('contact-details',{ 
     url: '/details/:id', 
     template: "<details-component></details-component>", 
    }) 
})

mainController.js（そのほかのモジュールで）UI-ルータのテンプレートで

(function() { 
    function MainController($scope, contactFactory) { 
     $scope.contacts = contactFactory.get(); 
    } 

    angular.module("MainModule") 
    .component("mainComponent", { 
     templateUrl: "/assets/partials/main.html", 
     controller: ["$scope", "contactFactory", MainController], 
    }) 
})()

とコードの半分：

<tbody> 
    <tr ng-repeat="contact in contacts | filter:search"> 
     <td>{{contact.name}}</td> 
     <td>{{contact.email}}</td> 
     <td>{{contact.phone}}</td> 
     <td><a ui-sref="contact-details({id:$index})" class="btn btn-default btn-xs">More..</a></td> 
    </tr> 
</tbody>

出典

2017-02-05 BGeeK

をご存知かもしれませんが、 $scopeはプロトタイプの継承を持っており、コードを次のように変更することができます：

では、このような範囲のオブジェクトのプロパティにsearchを割り当てます。これに

$scope.data = {}; 
$scope.data.search = '';

ご入力の変更：

<input type="text" class="form-control" placeholder="Search" ng-model="data.search" ng-keyup="startSearch()">

そして最後に、あなたの内側のコンポーネントは次のように次のようになります。

<tr ng-repeat="contact in contacts | filter:data.search"> 
     <td>{{contact.name}}</td> 
     <td>{{contact.email}}</td> 
     <td>{{contact.phone}}</td> 
     <td><a ui-sref="contact-details({id:$index})" class="btn btn-default btn-xs">More..</a></td> 
    </tr>

Here Miskoはより深く、この問題について説明します。

出典

2017-02-05 18:55:22 Rachmaninoff

回答ありがとうございます。残念ながら、私にとってはうまくいかず、何か間違ったことがありました。メインのアプリケーションコントローラには、あなたの答えのように空の初期化を使って$ scope.dataと$ scope.data.searchを追加しました。次に、 "search"を "data.search"に変更しました。 – BGeeK

ui.routerを使用してng-repeatでデータをフィルタリングする継承スコープ[Angular1.5]

答えて

関連する問題