ng-repeat过滤器不适用于重复变量赋值

时间:2015-06-30 05:04:50

标签: angularjs

JS Fiddle将提供有关代码的更多信息。

所选项目应该过滤其他值,我将在列表项目外面有一个按钮,将所选值重新分配为空,以便显示所有列表项目。

点击单选按钮,它应该隐藏其他元素。

CONTROLLER

$(document).ready(function () {
var newListItem
var newList = true;
var theList = document.getElementById('theList');

$('#addTask').on('click', function(e) {
  e.preventDefault();
  if (newList == true) {
    var theValue = $("#newTask").val();
    newListItem = '<li><span class="handle"> :: </span> <input class="listItem" style="border: none; background: transparent;" value="' + theValue + '"><button class="pull-right btn btn-danger btn-xs removeListItem"><i class="fa fa-trash-o "></i></button></li>';
        newList = false;
    } else {
        var theValue = $("#newTask").val();
        newListItem = $('#theList li:last').clone();
        newListItem.find('input').attr('value', theValue);
    }

    $('#theList').append(newListItem);

    $('#newTask').val('');
    $('#newTask').focus();
    });
    $('#theList').on('click', '.removeListItem', function (event) {
        event.preventDefault();
        $(this).closest('li').remove();
    });
    $('input[type="text"]').on('keydown', function (event) {
      if (event.keyCode === 13) {
        $("addTask").click();
    }
  });
});

HTML

var myApp = angular.module("repeat",["ngSanitize"]);

myApp.controller("repeatController", function($sce, $window, $scope){

$scope.test ="Controller is working fine";

$scope.lists=[{"name":"asdf","desc":"dummy text 1"},{"name":"wee","desc":"dummy text 2"},{"name":"fgs","desc":"dummy text 3"}]


});

2 个答案:

答案 0 :(得分:1)

如果我正确理解您需要here is the JSFiddle隐藏未点击的单选按钮:

HTML:

<div  ng-app="repeat" ng-controller="repeatController">
    <li ng-repeat ="list in lists" ng-hide="selected !== undefined && selected !== list.name">
        <label ng-click="$parent.selected = list.name">
            <input type="radio" name="selector" />
            {{list.name}}-{{selected}}
        </label>
    </li>
</div>

JS:

var myApp = angular.module("repeat", []);

myApp.controller("repeatController", function($sce, $window, $scope){

    $scope.test ="Controller is working fine";

    $scope.lists=[{"name":"asdf","desc":"dummy text 1"},{"name":"wee","desc":"dummy text 2"},{"name":"fgs","desc":"dummy text 3"}]
});

根据建议,您还需要从小提琴中删除ngSanitize或将其添加为文件(例如添加此资源,但为了小提琴的目的,您不需要它https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js

答案 1 :(得分:0)

您遇到ngSanitize问题,请删除模块中的ngSanitize,然后才能正常运行。

您的模块应该如下代码

var myApp = angular.module("repeat",[]);

请参阅此Working Demo