Angular ng-repeat剂量不会绑定动态创建的Array的数据

Question

我有这个错误，我尝试过StackOverflow上的帖子，没有任何解决方法如下：

1）$ rootScope Array。

2）$ scope。$ apply（）（在阅读之后我知道它不是最好的解决方案，因为它会产生错误，因为我的输入文本字段会在更改时触发它，所以现在需要使用它）

3）将数组保存在服务中也无法正常工作

这是我的代码

app.factory('searchService', function() {
var searchItems= [
      "Design",
      "Graphic Design",
      "PhotoShop",
      "UI/UX Design",
      "Web Design",
      "Web Development",
      "JavaScript",
      "CSS3",
      "HTML5",
      "C#",
      "ASP.Net",
      "Bootstrap",
      "Grid System",
      "JQuery",
      "JQuery UI",
      "JQuery Mobile",
      "Front-End",
      "Back-End",
      "PHP",
      "MySQL",
      "SQL Server",
      "Branding",
      "Logo Design",
      "Business Cards",
      "Print Design",
      "Brochure Design",
      "Vector Design",
      "Facebook Posts",
      "Facebook Covers",
      "Facebook Apps Design",
      "Digital Marketing",
      "Social Media",
      "Visual Studio.Net",
      "App Design",
      "App Developemnt",
      "Mobile Apps Design",
      "Mobile Apps Development",
      "Game Design",
      "Game Development",
      "Android",
      "Android Studio",
      "iOS",
      "Windows Phone",
      "Adobe Air",
      "Hypered Apps",
      "Cordova",
      "Universal Windows Apps",
      "Actionscript 3",
      "Flash",
      "2D Animation",
      "2D Characters",
      "2D Cartoon Animation",
      "Drawing",
      "Coloring",
      "Illustrating",
      "Sketching",
      "Systems Analysis",
      "Visio",
      "Pencil Sketcing",
      "Oil Paintings",
      "Book Authoring",
      "Writing",
      "E-Learning",
      "Multimedia Design",
      "Multimedia Development",
      "Windows Application",
      "3D Design",
      "3D Modeling",
      //--------------------------------
      "Java 2SE (Comming Soon)",
      "Aniamtion (Comming Soon)",
      "Motion Graphics (Comming Soon)",
      "Video Editing & Creating (Comming Soon)",
      "Photography (Comming Soon)",
      "Videography (Comming Soon)",
      "3D Animation (Comming Soon)",
      "Music Creation (Comming Soon)"
    ];
return searchItems;
});


app.factory('items', function() {
   var property = [];
    return {
        getProperty: function () {
            return property;
        },
        setProperty: function(value) {
            property = value;
        }
    };
});

app.controller('searchCTRL', function($scope, $rootScope, searchService, sharedProperties, items){
"use strict";

setTimeout(function(){
    addClass(document.getElementsByClassName("list-wrapper").item(0), 'animateIn');
},500);

$rootScope.searchItems = searchService;

//Sort Array
//$rootScope.searchItems.sort();
//Define Suggestions List
$rootScope.suggestions = [];
$rootScope.items = items.getProperty();
//Define Selected Suggestion Item
$rootScope.selectedIndex = -1;

//Function To Call On ng-change
$rootScope.search = function(){
    $rootScope.suggestions = [];
    var myMaxSuggestionListLength = 0;
    for(var i=0;i < $rootScope.searchItems.length;i++){
        var searchItemsSmallLetters = angular.lowercase($rootScope.searchItems[i]);
        var searchTextSmallLetters = angular.lowercase($scope.searchText);
        if(searchItemsSmallLetters.indexOf(searchTextSmallLetters) !== -1 && searchItemsSmallLetters.indexOf(searchTextSmallLetters) === 0){
            $rootScope.suggestions.push(searchItemsSmallLetters);
            items.setProperty($rootScope.suggestions);
            myMaxSuggestionListLength += 1;
            if(myMaxSuggestionListLength === 5){
                break;
            }
        }
    }
    //$rootScope.items = items.getProperty();
    angular.copy(items.getProperty(),$rootScope.items)
    console.log($rootScope.items)
};

//Keep Track Of Search Text Value During The Selection From The Suggestions List  
$rootScope.$watch('selectedIndex',function(val){
    if(val !== -1) {
        $scope.searchText = $rootScope.suggestions[$rootScope.selectedIndex];
        sharedProperties.setProperty($scope.searchText);
    }
});


//Text Field Events
//Function To Call on ng-keydown
$rootScope.checkKeyDown = function(event){
    if(event.keyCode === 40){//down key, increment selectedIndex
        event.preventDefault();
        if($rootScope.selectedIndex+1 < $rootScope.suggestions.length){
            $rootScope.selectedIndex++;
        }else{
            $rootScope.selectedIndex = 0;
        }
    }else if(event.keyCode === 38){ //up key, decrement selectedIndex
        event.preventDefault();
        if($rootScope.selectedIndex-1 >= 0){
            $rootScope.selectedIndex--;
        }else{
            $rootScope.selectedIndex = $rootScope.suggestions.length-1;
        }
    }else if(event.keyCode === 13){ //enter key, empty suggestions array
        event.preventDefault();
        $rootScope.suggestions = [];
        $rootScope.selectedIndex = -1;
        sharedProperties.setProperty($scope.searchText);
        $rootScope.showPopUpContent();
    }else if(event.keyCode === 27){ //ESC key, empty suggestions array
        event.preventDefault();
        $rootScope.suggestions = [];
        $rootScope.selectedIndex = -1;
    }else{
        $rootScope.search();
    }
};

//ClickOutSide
var exclude1 = document.getElementById('textFiled');
$rootScope.hideMenu = function($event){
    $rootScope.search();
    //make a condition for every object you wat to exclude
    if($event.target !== exclude1) {
        $rootScope.suggestions = [];
        $rootScope.selectedIndex = -1;
    }
};
//======================================

//Function To Call on ng-keyup
$rootScope.checkKeyUp = function(event){ 
    if(event.keyCode !== 8 || event.keyCode !== 46){//delete or backspace
        if($scope.searchText === ""){
            $rootScope.suggestions = [];
            $rootScope.selectedIndex = -1;
        }
    }
};
//======================================

//List Item Events
//Function To Call on ng-click
$rootScope.AssignValueAndHide = function(index){
     $scope.searchText = $rootScope.suggestions[index];
     sharedProperties.setProperty($scope.searchText);
     $rootScope.suggestions=[];
     $rootScope.selectedIndex = -1;
    };  
});

的index.html

<div class="list-wrapper" ng-controller="searchCTRL">
        <header>
            <h1><img class="emadzedan" src="./img/EmadZedan.png" width="123" height="123" alt="Emad Zedan"/></h1>
            <h1>Emad Morris Zedan</h1>
            <h4>Professional Web Designer,Front-End Developer, Artist & Book Author</h4>
        </header>
        <div class="label">Search for A Samples Category</div>

        <div><input type="text" autofocus placeholder="e.g. Web Design or Start With Any Letter..." id="textFiled" class="input" ng-keydown="checkKeyDown($event)" ng-keyup="checkKeyUp($event)"  ng-model="searchText" ng-change="search()" /></div>

        <ul class="suggestions-list">
            <li ng-repeat="suggestion in items track by $index" ng-class="{active : selectedIndex === $index}" ng-click="AssignValueAndHide($index)">{{suggestion}}</li>
        </ul>

        <div class="label">Search for "Design" to view all samples as "Design" is common along all samples.</div>

        <div class="buttonDiv" ng-click="showPopUpContent($index)">Search</div>
        <div class="menu">
            <div class="floatLeft"><a href="./Downloads/EmadZedanResume.pdf" target="_blank">Resume</a></div>
            <div class="floatLeft">|</div>
            <div class="floatLeft"><a href="./Downloads/EmadZedanCV.pdf" target="_blank">C.V.</a></div>
            <div class="floatLeft">|</div>
            <div class="floatLeft"><a href="http://www.emadbook.com" target="_blank">Blog</a></div>
            <div class="clearboth"></div>
        </div>
        <footer>Copyrights © 2017 for Emad Zedan</footer>
    </div>

{{Suggestion}} 是空的，尽管列表按数组的长度显示项目

css.css

@charset "utf-8";
/* CSS Document */
body{
    font-family:'Oswald', sans-serif;
    font-size:14px;
    font-weight: 300;
    margin:0px;
    padding:0px;
    color: #ddd;
    background-color: #121212;
}
.clearboth{
    clear:both;
}
.floatLeft{
    float:left; 
}
::-webkit-input-placeholder{
    color:#333;
    /*padding-left:10px;*/
}
:-moz-placeholder{ /* Firefox 18- */
    color:#333;
    /*padding-left:10px;*/
}
::-moz-placeholder{  /* Firefox 19+ */
   color:#333;
   /*padding-left:10px;*/
}
:-ms-input-placeholder{ 
   color:#333;
  /*padding-left:10px;*/
}
input{
    color:#333;
}
.list-wrapper {
    position:absolute;
    width:300px;
    height:150px;
    top:10%;
    left:50%;
    margin-left:-150px;
    opacity:0;
    transform: translateY(200px) rotateX(90deg);
    -webkit-transform: translateY(200px) rotateX(90deg);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
    -webkit-transition: all  0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
}
header{
    prespective:1000;
}
h1, h4{
    text-align:center;
    padding:5px;
    margin:5px; 
    line-height: normal;
}
h4{
    color:#990000;
}
.emadzedan{
    border-radius:50%;
    border:3px solid #900;
    position:relative;
    margin:5px auto;
}
.label{
    padding: 5px 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    display: block;
    width: 300px;
    margin: 0 auto;
    line-height: normal;
    white-space: normal;
}
footer{
    text-align:center;
    width:100%; 
}
.menu{
    text-align:center;
    width:150px;
    left:50%;
    margin:10px auto;
}
.menu a, .menu a:visited{
    color:#ddd;
    text-decoration:none;
    display:inline-block;
    padding:0px 10px;   
}
.menu a:hover{
    color:#900;
}
.input{
    width:280px;
    height:35px;
    outline:none;
    padding:0px 10px;
    margin:0px auto;
    display:block;
    border:1px solid #ddd;
}
.suggestions-list {
    position: absolute;
    list-style-type: none;
    margin:0px;
    padding:0px;
    overflow:auto;
    z-index:2;
    margin-left:10px;
}
.suggestions-list li {
    color: #000;
    padding: 5px 10px;
    height:30px;
    cursor: pointer;
    background: #f5f5f5;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width:280px;

}
.suggestions-list li:last-child{
    border-bottom: 1px solid #ddd;
}
.suggestions-list li:hover {
    background: #ddd;
}
.suggestions-list li:active,
.suggestions-list li.active {
    color: #FFFFFF;
    background: #900;
    width:280px;
}
.suggestions-list:focus{
    outline:none;
}
.buttonDiv{
    color: #FFF;
    background: #900;
    border:1px solid #FFF;
    padding:10px 50px;
    display:inline-block;
    border-radius:50px;
    cursor:pointer;
    text-align:center;
    max-width:50%;
    margin:10px 0px 10px 85px;
}
.buttonDiv:hover{
    color:#900;
    background:#FFF;    
    border:1px solid #900;
}
/*-----------------------------*/
.popup{
    background-color:#121212;
    height:auto;
    min-height:100vh;
    width:100%;
    position:absolute;
    left:0px;
    top:0px;
    z-index:3;
    display:none;
}
.popupHeader{
    padding:10px 0px 0px 15px;
    font-size:16px;
    color:#333;
    height:50px;
    background-color:#ddd;
    position:Fixed;
    top:0;
    left:0;
    width:100%;
    z-index:10;
}
.popupContent{
    width:90%;
    margin:50px auto;
}
.closeButton{
    color: #333;
    padding:5px 15px;
    height:30px;
    display:inline-block;
    border-radius:50px;
    cursor:pointer;
    text-align:center;
    float:right;
    font-size:64px;
    position:absolute;
    top:-25px;
    right:-5px;
    perspective: 1000px;
}
.closeButton:hover{
    color:#900;
}
.block{
    float:left;
    margin:10px 10px 0px 0px;
    width:32.6%;
    display:none;
    cursor:pointer;
    opacity:0;
    transform: translateY(200px) rotateX(90deg);
    -webkit-transform: translateY(200px) rotateX(90deg);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
    -webkit-transition: all  0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
}
.animateIn{
    display:block;
    opacity:1;
    transform: translateY(0px) rotateX(0deg);
    -webkit-transform: translateY(0px) rotateX(0deg);
}
.block img {
    border:5px solid #333;
    opacity:0.8;    
}
.block img:hover {
    border:5px solid #900;
    opacity:1;  
}
@media all and (max-width: 1530px){
    .block{
        float:left;
        margin:10px 10px 0px 0px;
        width:48.5%;
        display:none;
    }
}
@media all and (max-width: 800px){
    .block{
        float:left;
        margin:10px 10px 0px 0px;
        width:100%;
        display:none;
    }
}
.popupHeader .emadzedan{
    position:relative;
    top:-5px;
    border:1px solid #900;  
}
.positionSearchTerm{
    position:relative;
    left:5px;
    top:-5px;
}
.SearchTerm{
    color:#900; 
    text-transform: capitalize;
}
.details{
    background-color:#333;
    width:100%;
    min-height:100vh;
    max-height:100vh;
    display:none;
    z-index:5;
    position:fixed;
    top:0px;
    left:0px;
    prespective:1000;
}
.detailsInner{
    width:50%;
    position:absolute;
    z-index:6;
    top:10%;
    left:50%;
    margin-left:-25%;
    display:none;
    transform: translateY(500px) rotateY(90deg);
    -webkit-transform: translateY(500px) rotateY(90deg);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
    -webkit-transition: all  0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);

}
.animateIn2{
    transform: translateY(0px) rotateY(0deg);
    -webkit-transform: translateY(0px) rotateY(0deg);
}
.animateOut2{
    transform: translateY(500px) rotateY(90deg);
    -webkit-transform: translateY(500px) rotateY(90deg);
}
.DetailsHeader{
    padding:15px 0px 15px 15px;
    font-size:16px;
    color:#333;
    height:50px;
    background-color:#ddd;
    border-top:5px solid #900;
    border-left:5px solid #900;
    border-right:5px solid #900;
}
#DetailsContent{    
    border-bottom:5px solid #900;
    border-left:5px solid #900;
    border-right:5px solid #900;
}
.closeButtonInner{
    color: #333;
    padding:5px 15px;
    height:30px;
    display:inline-block;
    border-radius:50px;
    cursor:pointer;
    text-align:center;
    float:right;
    font-size:64px;
    position:relative;
    top:-45px;
}
.closeButtonInner:hover{
    color:#900;
}

这是设计的快照，以便在我的电脑上查看结果：

Answer 1

我找到了正确的解决方案：

Mon, Sep 05 2:30AM GMT+5:30

data-ng-bind =“暗示{{suggestion}}

的建议”

Answer 2

你必须使用$ index跟踪这样的数组。 check this angular documentation

 <div ng-repeat="n in suggestions track by $index">
      {{n}}
    </div>

这可能对你有帮助。

Answer 3

Heloo Emad，我遇到了你正面临的问题。即使我遇到了这个问题，我也从文章Facing problem with ng-Repeat中得到了解决方案。最好的部分是，他们只是没有给出解决方案，而是它发生的原因。

为了更好地理解，您还可以找到解释所有内容的YouTube视频。

希望它也适合你。