AngularJS

Question

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

这是我的代码。

** 我看到很多时间，我们可以使用 $scope.$reload() 这样的东西，但在我的例子中我不使用 $scope 并且我从 Angular.

而且我没能在 Plunker 中用我的项目创建一个示例...抱歉。

提前致谢

我的控制器：

(函数(){ '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

改变

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

以便您在 img src 上设置数据绑定。

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

并且您可以在更改事件中设置该 dynamicImgLocation 值

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

AngularJS - refresh my UI after modify data

controller

page-refresh