Question

您好我想在我的UI上更新图片。我有不同的数据，有一个明星。当我点击一个星星时，我将我的对象的值设为true为false。这部分工作，但是我不知道如何刷新ma UI以在值为True时放置黄色星形，或者在值为false时刷新白色星形。

这是我的代码。

**我看到很多timnes，我们可以使用$ scope。$ reload（）这样的东西，但在我的情况下，我不使用$ scope，我从Angular开始。

我没有设法用我的项目在Plunker中创建一个例子......抱歉。

提前谢谢

我的控制器：

（function（）{ 'use strict';

angular
    .module('NomApplication')
    .controller('ApplicationEtatController', ApplicationEtatController);

ApplicationEtatController.$inject = ['Donnees'];

/**
 * Constructeur du contrôleur d'état d'application.
 * @param {array} Donnees Données.
 * @returns {undefined}
 */
function ApplicationEtatController(Donnees) {
    /* jshint validthis:true */
    var vm = this;
    vm.Donnees = Donnees;
    vm.DonneesTemp = vm.Donnees;
    vm.filtreFavoris = "false";
    vm.filterModeles = filterModeles;
    vm.filteredLetters;
    vm.filterByFavoris = filterByFavoris;
    vm.filterByLangue = filterByLangue;
    vm.filterBySujet = filterBySujet;

    vm.filtreParSujet = 'false';
    vm.filtreParFavori = 'false';

    vm.gererFavori = gererFavori;

    vm.languesModele = [
        { langue: "En anglais et français", CodLang: "FA" },
        { langue: "En français", CodLang: "F" },
        { langue: "En anglais", CodLang: "A" }
    ];
    vm.langueSelect = "FA";

    vm.NbEnr = Donnees.length;
    vm.nomImgFav = "";


    function filterModeles() {
        //Filtrer par langue
        var filtered = [];

        vm.DonneesTemp = vm.Donnees;

        if (vm.langueSelect.CodLang == "F") {
            for (var i = 0; i < vm.DonneesTemp.length; i++) {
                var mdlCourant = vm.DonneesTemp[i];
                if (mdlCourant.CodLang.indexOf("F") >= 0) {
                    filtered.push(mdlCourant);
                }
            }
            vm.DonneesTemp = filtered;
        }
        else if (vm.langueSelect.CodLang == "A") {
            for (var i = 0; i < vm.DonneesTemp.length; i++) {
                var mdlCourant = vm.DonneesTemp[i];
                if (mdlCourant.CodLang.indexOf("A") >= 0) {
                    filtered.push(mdlCourant);
                }
            }
            vm.DonneesTemp = filtered;
        }
        else {
            vm.DonneesTemp = vm.Donnees;
        }


        //Filtrer par sujet
        if (vm.filtreParSujet == "true") {
            filtered = [];
            if (vm.filteredLetters != null && vm.filteredLetters != "") {
                for (var i = 0; i < vm.DonneesTemp.length; i++) {
                    var filteredMdl = vm.DonneesTemp[i];
                    for (var j = 0; j < filteredMdl.Sujets.length; j++) {
                        var filteredMdlSuj = filteredMdl.Sujets[j];
                        var nomLower = filteredMdlSuj.nom.toLowerCase();
                        if (nomLower.indexOf(vm.filteredLetters) >= 0) {
                            filtered.push(filteredMdl);
                        }
                    }
                }
                vm.DonneesTemp = filtered;
            }
        }


        //Filtrer par favori
        if (vm.filtreParFavori == "true") {
            filtered = [];
            for (var i = 0; i < vm.DonneesTemp.length; i++) {
                if (vm.DonneesTemp[i].estFavori == 'true') {
                    filtered.push(vm.DonneesTemp[i]);
                }
            }
            vm.DonneesTemp = filtered;
        }
        else {
            //vm.DonneesTemp = vm.Donnees;
            //vm.filterByLangue();
            //vm.filterBySujet();
        }

    }


    function filterByLangue() {
        //var filtered = [];

        //if (vm.langueSelect.CodLang == "F") {
        //    for (var i = 0; i < vm.DonneesTemp.length; i++) {
        //        if (vm.DonneesTemp[i].CodLang == 'F' || vm.DonneesTemp[i].CodLang == 'FA') {
        //            filtered.push(vm.DonneesTemp[i]);
        //        }
        //    }
        //    vm.DonneesTemp = filtered;
        //}
        //else if (vm.langueSelect.CodLang == "A") {
        //    for (var i = 0; i < vm.DonneesTemp.length; i++) {
        //        if (vm.DonneesTemp[i].CodLang == 'A' || vm.DonneesTemp[i].CodLang == 'FA') {
        //            filtered.push(vm.DonneesTemp[i]);
        //        }
        //    }
        //    vm.DonneesTemp = filtered;
        //}
        //else {
        //    vm.DonneesTemp = vm.Donnees;
        //}
    }


    function filterByFavoris() {
        var filtered = [];
        if (vm.filtreParFavori == "true") {
            vm.filtreParFavori = "false";
        }
        else {
            vm.filtreParFavori = "true";
        }

        vm.filterModeles();
    }


    function filterBySujet() {
        if (vm.filteredLetters != null && vm.filteredLetters != "") {
            vm.filtreParSujet = "true";
        }
        else {
            vm.filtreParSujet = "false";
        }

        vm.filterModeles();

    }


    function gererFavori(idModele) {
        for (var i = 0; i < vm.DonneesTemp.length; i++) {
            var mdlCourant = vm.DonneesTemp[i];
            if (mdlCourant.id == idModele) {
                if (mdlCourant.estFavori == 'true') {
                    mdlCourant.estFavori = 'false';
                }
                else {
                    mdlCourant.estFavori = 'true';
                }
            }
        }

        vm.filterModeles();

    }
}

}（））;

我的html文件

<div class="panel panel-primary container-fluid">
<div class="row">
    <div class="col-md-8" style="width:700px;padding-top:10px">
        <input type="search" name="txtSearch" value="" class="form-control" width="400" />
        <a href="#" class="search-icon">
            <i class="fa fa-search"></i>
        </a>
    </div>
    <div class="col-md-4">
    </div>
</div>
<div class="row">
    <div class="col-md-12" style="padding-top:10px;width:1200px">
        <select class="form-control" style="width:200px;display:inline-block;margin-right:50px" name="filter" id="filter" ng-model="vm.langueSelect" ng-options="langue.langue for langue in vm.languesModele" ng-change="vm.filterModeles()"></select>
        <div style="width:350px;display:inline-block;">
            <input placeholder="Filter par sujet" class="form-control" style="width:200px;display:inline-block" type="text" name="txtFilterBySujet" value="FA" ng-model="vm.filteredLetters" />
            <input type="button" ng-click="vm.filterBySujet()" id="btnFiltreSUjet" value="Filtrer" style="width:70px;margin-right:50px;display:inline-block" />
        </div>
        <div style="width : 200px;display:inline-block">
            <a href="#" ng-click="vm.filterByFavoris()" ng-model="filtered">
                <img ng-src="../../Content/Images/favori_on.gif" alt="Filter par favoris" />  Favoris
            </a>
        </div>
    </div>
</div>

<div class="row" style="padding-top:15px">
    <div class="col-md-8">
        <p>
            {{vm.DonneesTemp.length}} résultats.
        </p>
    </div>
    <div class="col-md-4">

    </div>
</div>

<div ng-init="vm.DonneesTemps" ng-repeat="Donnee in vm.DonneesTemp" style="border:1px solid black;background-color:#ffffff ;width:500px; float:left; margin:0 0 25px 20px;padding: 0 0 0 15px;height:150px">
    <div style="width:480px;display:inline-block;">
        <div ng-switch="{{Donnee.TxtTitremdlDoc.length > 40}}">
            <div ng-switch-when="true">
                <h1 style="font-size:1.4em;margin:5px 0 0 0;width:430px;display:inline-block; float:left;" title="{{Donnee.TxtTitremdlDoc}}">{{Donnee.TxtTitremdlDoc | limitTo: 40}} ...</h1>
            </div>
            <div ng-switch-when="false">
                <h1 style="font-size:1.4em;margin:5px 0 0 0;width:430px;display:inline-block; float:left;" title="{{Donnee.TxtTitremdlDoc}}">{{Donnee.TxtTitremdlDoc}}</h1>
            </div>
        </div>

        <a href="#" style="width:40px;margin:0px;height:21px" ng-click="vm.gererFavori(Donnee.id)">
            {{Donnee.estFavori}}
            <div ng-switch="{{Donnee.estFavori}}" style="width:45px;margin:0px;height:21px;display:inline-block;float:left;padding-left:5px">
                <p ng-switch-when="false" style="width:45px;margin:0px;height:21px;display:inline-block">
                    <img ng-src="../../Content/Images/favori_off.gif" alt="Alternate Text" style="vertical-align:top;display:inline-block;float:left" />
                    <img ng-src="../../Content/Images/favori_on.gif" alt="Alternate Text" style="vertical-align:top;display:none;float:left" />
                </p>
                <p ng-switch-when="true" style="width:40px;margin:0px;height:21px;display:inline-block; text-align:right;">
                    <img ng-src="../../Content/Images/favori_on.gif" alt="Alternate Text" style="vertical-align:top;display:inline-block;float:left" />
                    <img ng-src="../../Content/Images/favori_off.gif" alt="Alternate Text" style="vertical-align:top;display:none;float:left" />
                </p>
            </div>
        </a>

    </div>
    <h2 style="font-size:1.1em;margin:5px 0 0 0;">{{Donnee.NoRefreMdlDoc}}</h2>

    <div ng-repeat="sujet in Donnee.Sujets" style="text-align: left; margin: 0px; display: inline-block;">
        <span>{{sujet.nom}} {{$last ? '' : ($index==Sujets.length-2) ? ' and ' : ', '}}</span>
    </div>

    <div ng-switch="{{Donnee.DescMdlDoc.length >  50}}">
        <br />
        <div ng-switch-when="true">
            <p>{{Donnee.DescMdlDoc | limitTo: 50}} ...</p>
        </div>
        <div ng-switch-when="false">
            <p>{{Donnee.DescMdlDoc}}</p>
        </div>
    </div>
</div>

Answer 1

Change

<img ng-src="../../Content/Images/favori_on.gif" alt="Filter par favoris" />  Favoris

so that you set up databinding on the img src.

<img ng-src="{{dynamicImgLocation}}" alt="Filter par favoris" />  Favoris

And you can set that dynamicImgLocation value on your change event

function filterByFavoris() {
    var filtered = [];
    if (vm.filtreParFavori == "true") {
        vm.filtreParFavori = "false";
        vm.dynamicImgLocation = "../../Content/Images/favori_on.gif"
    }
    else {
        vm.filtreParFavori = "true";
        vm.dynamicImgLocation = "../../Content/Images/noStar.gif"
    }



    vm.filterModeles();
}

AngularJS - 修改数据后刷新我的UI

1 个答案: